Reputation: 1546
hei, I am looking to achieve something like this using html/css:
In my case the "See chapter..." part should float on the right side of the text.
I thought I set a certain width for the normal text and then float the reference on the right side of it: like this:
HTML:
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum ‣3, Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p>
<div class="crossRef">see chapter bla</div>
CSS:
p{
width: 300px;
float: left;
}
.crossRef{
width: 50px;
float: left;
}
Here is an js fiddle that shows what I thought: https://jsfiddle.net/vbr3bL46/ But this apparently doesn't work that easily. The cross ref now is always at the top of this element, not where it actually is in text... does anyone have an idea how to achieve it?
Upvotes: 0
Views: 59
Reputation: 316
Try changing the display and adding a margin on top
p{
width: 300px;
float:left;
}
.crossRef{
margin-top:20px;
width: 50px;
display:inline-block;
}
Upvotes: 0
Reputation: 476
UPDATED FIDDLE - https://jsfiddle.net/vbr3bL46/8/
Doing it this way allows you to put the chapters in line with the citations. Basically the <p>
has a 35% padding to the right, then each citation has a negative right margin of 35% so it moves it, in-line, to the empty space on the right.
HTML:
<div class="row">
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum, Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem 5 <span class="ref">see chapter 5</span> ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem 7 <span class="ref">see chapter 7</span>ipsumLorem ipsumLorem ipsumLorem ipsum</p>
</div>
CSS:
.row {
float: left;
width: 100%;
}
.row p {
float: left;
width: 100%;
padding-right: 35%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.row .ref {
float: right;
margin-right: -35%;
}
Upvotes: 1
Reputation: 9012
You need to NOT give float to your main text and put the float element on top of html:
.crossRef{
width: 50px;
height:50px;
background-color:red;
float: left;
margin-right:20px;
}
The margin and color are set just for better view.
EDITED: As it looks I missunderstood the question I give now a more "flexible" answer. Youc an use a container with this properties:
.container {
display: inline-flex;
flex-flow: row wrap-reverse;
justify-content: flex-end;
align-items: stretch;
align-content: flex-end;
}
Like this: FIDDLE
Upvotes: 0
Reputation: 115046
You will probaly have to add a container and adjust the structure slightly.
p {
width: 300px;
}
.crossRef {
width: 150px;
float: left;
height: 150px;
margin-right: 1rem;
text-align: center;
line-height: 150px;
}
<div>
<div class="crossRef">see chapter bla</div>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum ‣3, Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem
ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p>
</div>
Upvotes: 0