Question

我只使用了几个DIV元素获得了以下HTML页面。这些元素是使用左边距的随机值生成的。

附加信息：HTML文件中的DIV元素必须保持给定的顺序。

<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>

结果页面如下所示：

actual page layout

有没有办法，用纯CSS将DIV-elemets对齐到页面顶部？ DIV元素应该叠加，如果它们不完全在前面的DIV旁边。这就是元素2和4在第二行的原因。因为没有'float：top;'命令，我不知道如何实现以下布局：

desired page layout

由于我的问题仍然不明确，这里有另一个例子来澄清，布局应该与随机生成的DIV元素一起使用：

enter image description here

如果元素不适合前面的元素，它应该叠加。如果它适合，它应该与顶部对齐。

如果没有纯CSS的方法，也可以使用JS解决方法。

Answer 1

您可以将float: left应用于.box类，也可以将其display值设置为inline-block，除非图表中元素2和4必须包含低于1,3和5。

没有float: top，因为它不是严格要求的。 div是block元素，这意味着在文档的正常流程中，它们会根据HTML中的位置显示在彼此之下。我上面提到的混合显示值inline-block，具有类似块的特性，但以水平方式显示元素。

如果您要求页面上的某些元素向上或向下“浮动”（在每天的意义上），您可以尝试将margin-top应用于需要较低的元素吗？

Answer 2

您必须使用float:left;并重新安排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>

请检查jsfiddle demo

Answer 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，跟踪每个div使用的空间，并在没有更多空间将div放入现有行时添加“行”。

请参阅此jsFiddle。

注意：

要使其正常工作，position的{{1}}必须设为div
假设absolute s的高度相同。如果情况并非如此，你需要进行一些调整。

如何浮动：顶部？

3 个答案: