如何用css自动调整html块元素的位置(附图)
如何用css自动调整html块元素的位置(附图)
提问于 2015-02-25 21:50:15
是否可以单独使用css创建此页面布局？如果是这样的话，最好的办法是什么呢？浮动放置所有块级别的元素对齐最后一页沿顶部，显示:内联块只是对齐沿底部。也不要从下面的图像创建聚合模型。
我知道我可以手动地定位它们，但是div中充满了来自数据库的内容，因此它们需要自动调整和对齐，而不依赖于它们的大小。我曾想过用javascript计算它们的所有高度，并以这种方式动态地定位它们，但我有一种感觉，可能有一种简单的方法可以完全忽略它们。有什么想法吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-02-25 22:05:44
最新回复：
Flexbox几乎可以做你想做的事情(就像我在下面发布的一样)，但是如果你订购的东西必须是从左到右，并且它必须像你的模拟一样垂直地紧贴--也许类似于http://masonry.desandro.com/。
原始响应：
也许可以试试这样的东西？
.container {
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 3;
column-gap: 15px;
column-fill: auto;
}
.container div {
display: inline-block;
width: 200px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
margin-bottom: 10px;
}这里：http://jsfiddle.net/bvaughn/rrpg58yy/
Stack Overflow用户
发布于 2015-02-25 22:05:29
我想你正在寻找一个类似于Pinterest的布局，所以第一次谷歌搜索返回了这个例子。还有很多其他的结果，所以我相信，如果你搜索自己，其中一个应该适合你的需要。
Stack Overflow用户
发布于 2015-02-25 22:11:58
有3列，填充其中的块，像这样，
骨架：
<div class="column-container">
<div class="column-1">
<div class="block">...</div>
<div class="block">...</div>
</div>
<div class="column-2">
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
</div>
<div class="column-3">
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
</div>
</div>css:
.column-1, .column-2, .column-3{
float:left;
width:200px;
height:auto;
}
.block{
display:block;
width:180px;
}添加到每一列中的块将位于另一列下面。很简单。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28730337
复制相关文章
相似问题
腾讯云开发者
