Question

我需要从左到右回显一组div，没有重叠它们的行......就像这样。

如您所见，水平行未被破坏。每条线在最长（高度）div结束后开始。

我循环遍历一个数组，每个方块代表一个元素。高度可能作为数组中的数据出现。

那么，这样做的方式是什么？

更新

这是我尝试过的......

.divbox{
float:left;
width:100px;
}

这段代码几乎完全符合我的要求，但并非总是如此。所以，那不会奏效。

Answer 1

使用CSS flexbox。这里是更多信息的链接https://css-tricks.com/snippets/css/a-guide-to-flexbox/

代码示例：https://jsfiddle.net/9kn8L4a2/

<html>
<head>
    <style>
        div{
            width:100px;
            background-color: blue;
            border:solid 2px black;
            display:inline-block;
        }
        body{
            width:100%;
            display:flex;
            align-items:flex-start;
            flex-wrap:wrap;
        }
    </style>
</head>
    <body>
            <div style="height:100px"></div>
            <div style="height:200px"></div>
            <div style="height:300px"></div>
            <div style="height:100px"></div>
            <div style="height:100px"></div>
            <div style="height:200px"></div>
            <div style="height:300px"></div>
            <div style="height:100px"></div>
            <div style="height:100px"></div>
            <div style="height:200px"></div>
            <div style="height:300px"></div>
            <div style="height:100px"></div>
            <div style="height:100px"></div>
            <div style="height:200px"></div>
            <div style="height:300px"></div>
            <div style="height:100px"></div>
            <div style="height:100px"></div>
            <div style="height:200px"></div>
            <div style="height:300px"></div>
            <div style="height:100px"></div>
            <div style="height:100px"></div>
            <div style="height:200px"></div>
            <div style="height:300px"></div>
            <div style="height:100px"></div>
            <div style="height:200px"></div>
            <div style="height:300px"></div>
            <div style="height:100px"></div>
    </body>
</html>

希望它有所帮助！

从左到右显示一组div而不会破坏它们的行

1 个答案: