我正在使用左浮动 DIV 来模拟两列布局(每个 div 包含用于编辑不同数据的文本字段,例如姓名、爱好等)。所以它应该是这样的
1 2
3 4
5 6
现在我的 div-box 并不总是相同的,因为一些 DIV 比其他的有更多的元素。现在我的布局看起来像这样
1 2
2
3 4
5 6
你也可以在this example上看到效果如果你缩放你的以便只显示四个或三个列。例如。如果连续显示 4 列,则 Float 1 和 Float 6 之间有很多空间。这在我的 UI 上看起来不太好。我想要的是在 Float 1 之后有 Float 6,中间没有空格(我定义的边距除外)
编辑:我的 DIV 基本上只包含一个 float:left 和一个 width:40%,以便两个适合屏幕
这是显示更多 的屏幕截图
最佳答案
这是一个纯 CSS 解决方案。我拍了this例子
如果您想了解更多信息,请查看。他还使用 jQuery Masonry作为后备。
CSS:
.masonry { /* Masonry container */
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
.item { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
HTML:
<div class="masonry">
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div>
<div class="item">Incidunt sit unde minima in nostrum? Incidunt sit unde minima in nostrum?</div>
<div class="item">Ducimus, voluptates, modi, delectus animi maiores consequuntur repellat quisquam fugiat eum possimus enim culpa totam praesentium magni quae!</div>
<div class="item">Lorem ipsum dolor sit amet, dicta dolore adipisci hic ipsam velit deleniti possimus cumque accusantium rerum quibusdam.</div>
<div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div>
<div class="item">Incidunt sit unde minima in nostrum?</div>
<div class="item">Incidunt sit unde minima in unde minima in unde minima in nostrum?</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, praesentium consequatur ducimus commodi quam ex illo omnis dicta reiciendis vel nesciunt deserunt aut sequi nam mollitia perferendis ipsam possimus temporibus!</div>
<div class="item">Ab, adipisci, temporibus eaque quis harum perferendis incidunt cupiditate doloribus dolor numquam voluptates ipsum dolore aspernatur et voluptate ipsam beatae animi culpa.</div>
</div>
希望对您有所帮助。谢谢。
关于具有不同高度的 CSS Floating Div 与它们之间的空间对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3628311/