How to float: top?
Question
I got the following HTML page with just a couple of DIV-elements. These elements are generated with random values for the left margin.
Additional Info: The DIV-elements in the HTML file have to stay in the given order.
<html>
<head>
<style type="text/css">
.box{
height: 50px; width: 50px; border: 1px solid black;
text-align: center; margin-bottom: 5px;
}
</style>
<title></title>
</head>
<body>
<div class="box">1</div>
<div class="box" style="margin-left: 30px">2</div>
<div class="box" style="margin-left: 90px">3</div>
<div class="box" style="margin-left: 120px">4</div>
<div class="box" style="margin-left: 240px">5</div>
</body>
</html>
The resulting page looks like this:
Is there a way, to align the DIV-elemets to the top of the page with pure CSS? DIV-elements should stack up, if they aren't completely beside the preceding DIV. That is why element 2 and 4 are in the second row. Since there is no 'float: top;' command, I have no idea how to achieve the following layout:
Since my problem is still not clear, here is another example to clarify, that the layout should work with random generated DIV-elements:
If the element does not fit beside the preceding element, it should stack up. If it fits, it should align to the top.
If there is no way with pure CSS, a JS workaround would also be possible.
3 answers
solution1
0 2013-11-18 13:17:57
You can either apply a float: left to the .box class or set its display value to inline-block , unless there's a reason elements 2 and 4 in your diagram have to be below 1, 3, and 5.
There's no float: top because it's not strictly required. div s are block elements, which means that in the normal flow of the document, they appear beneath one another, according to their placement in your HTML. There's a hybrid display value that I mentioned above, inline-block , which has block-like qualities but displays the elements in a horizontal fashion.
If you require that certain elements on your page "float" up or down (in the every day sense of the word), you might try applying a margin-top to the elements that need be be lower?
solution2
0 2013-11-18 13:22:02
You have to use float:left; and re-arrange divs
<table><tr>
<td><div class="box">1</div></td>
<td><div class="box" style="margin-left: 30px;">2</div></td>
<td><div class="box" style="margin-left: 90px">4</div></td>
<td><div class="box" style="margin-left: 120px">3</div></td>
<td><div class="box" style="margin-left: 240px">5</div></td>
</tr></table>
<style>
table{width:100%;}
table td{
height:120px;
}
table td:nth-child(1n){
vertical-align:top;
}
table td:nth-child(2n){
vertical-align:bottom;
}
.box{
height: 50px;
width: 50px;
border: 1px solid black;
text-align: center;
margin-bottom: 5px;
}
</style>
Please check jsfiddle demo
solution3
0 ACCPTED 2013-11-30 11:06:28
You can call this javascript function once the page is loaded ( <body onload="float_top()"> ) :
var top = 5; // top value for next row
var margin = 5; // space between rows
var rows = []; // list of rows
function float_top() {
for (var c = 0; c < document.body.children.length; c++) {
var ok = false;
var child = document.body.children[c];
var cr = child.getBoundingClientRect();
for (var i = 0; i < rows.length; i++) {
if (cr.left > rows[i].right) {
rows[i].right = cr.right;
child.style.top = rows[i].top + "px";
ok = true;
break;
}
if (cr.right < rows[i].left) {
rows[i].left = cr.left;
child.style.top = rows[i].top + "px";
ok = true;
break;
}
}
if (!ok) {
// add new row
rows.push({
top: top,
right: cr.right,
left: cr.left
});
child.style.top = top + "px";
top = child.getBoundingClientRect().bottom + margin;
}
}
}
It iterates over the div s, keeps track of the space used by each div and adds "rows" when there's no more space to put a div in the existing rows.
See this jsFiddle .
Note:
- for this to work, the
positionof thedivs must be set toabsolute - the
divs are assumed to be the same height. You'll need some tweaking if it's not the case.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.