如何使元素浮动到顶部？

Question

如何使元素浮动到顶部？

4

我得到了一个只有几个 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>

生成的页面如下所示：实际页面布局

是否有一种方法可以使用纯CSS将DIV元素与页面顶部对齐？如果它们不完全在前面的DIV旁边，DIV元素应该堆叠。这就是为什么元素2和4在第二行的原因。由于没有“float: top;”命令，我不知道如何实现以下布局：所需页面布局

由于我的问题仍然不清楚，这里有另一个示例以澄清，即布局应该适用于随机生成的DIV元素：输入图像描述

如果元素无法放置在前面的元素旁边，则应堆叠。如果适合，则应与顶部对齐。

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

- benny.la

1

因为他想让他的 div 浮在顶部，看看第二张图片。 - OlivierH

2

可能是重复的问题：如何使用CSS使浮动元素置顶？ - OlivierH

1

使用 display:inline，它能够正常工作。 - Kaushik

1

第二个为什么在第二行？这似乎不像是浮动到顶部的方式？ - Liam

你遇到的问题是屏幕变小或变大时会发生什么？缩小你的浏览器窗口，看看我的意思。你实际上想要什么非常不清楚。 - Liam

显示剩余3条评论

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Parixit · Answer 1

你需要使用 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。

- Rémi Svahn · Answer 2

在页面加载完成后，你可以调用这个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。

注意：

为了使其工作，div 的 position 必须设置为 absolute
假定 div 具有相同的高度。如果不是这种情况，您需要进行一些调整。

- Chase Ries · Answer 3

你可以将 .box 类应用 float: left 或者将其 display 属性设置为 inline-block，除非你的图表中第二个和第四个元素必须位于第一、三、五个元素下方。

没有 float: top 是因为它并不是严格要求的。 div 元素是块级元素，这意味着在文档的正常流程中，它们按照在 HTML 中的排列顺序依次显示在彼此下方。我上面提到过一种混合显示值，inline-block，它具有块级元素的特性，但以水平方式显示元素。

如果你需要页面上的某些元素“浮动”上下（按日常意义），你可以尝试对需要降低的元素应用 margin-top。