Geek Answers Handbook

How to swim: on top?

I got the following HTML page with several pairs of DIV elements. These elements are generated with random values ​​for the left margin.

Additional Information: DIV elements in the HTML file must remain in the specified 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 is as follows:

actual page layout

Is there a way to align div elements at the top of a page using pure CSS? DIV elements must add up if they are not completely next to the previous DIV. That is why elements 2 and 4 are in the second line. Since there is no "float: top;" command, I have no idea how to achieve the following layout:

desired page layout

Since my problem is still not clear, here is another example explaining that the layout should work with randomly generated DIV elements:

enter image description here

, . , .

CSS , JS.

+4
3

javascript (<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;
        }
    }
}

div s, , div, "", div .

jsFiddle.

:

  • , position div absolute
  • , div . , .
0

float: left .box display inline-block, , 2 4 1, 3 5.

float: top, . div block , , , HTML. , , inline-block, , .

, "" ( ), margin-top , ?

0

You must use float:left;and reinstalldivs

<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

0
source

More articles:


All Articles