这不是通常的3栏布局问题: - )
想象一下报纸上的分类广告部分(请记住那些?)...我的设计中我在屏幕上有一个固定大小的框(例如600x200),分为3列,推文显示在每一栏。因此,推文将开始填充第一列,他们将继续堆叠在第一列,直到我们发布不再适合的推文,因此它将被碰到下一列......等等。
这是我所追求的模型(我必须删除每条推文上的名字,但你明白了):
这很棘手,因为我们的目标是尽可能多地将推文放入包装盒中,但我不知道每条推文的高度......它可能是一个单词,它可能是全部140个字符,使用全部大写字母会占用很大的空间。封闭盒总是大小相同,不能改变。所以我需要某种智能的“流程”,因此它知道何时移动到下一列并填充所有可用空间。有没有办法在CSS / HTML中做到这一点?
答案 0 :(得分:5)
仅使用CSS,列似乎是最佳方式。
每条推文只是一对<strong>
个用户名和<p>
推文正文。将这些更改为您喜欢的任何内容,但请务必更改CSS以匹配。
<div class="threecol">
<strong>@someone</strong>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.</p>
<strong>@nextuser</strong>
<p>...</p>
</div>
这个CSS用于容器。除了您的指定(宽度,高度,隐藏溢出)之外,它只会添加列设置。
.threecol {
height: 200px;
width: 600px;
margin: auto;
overflow: hidden;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
这仅适用于您希望推文与@name
符合要求的风格。
p {
display: inline;
width: 30%;
}
这导致<p>
和以下推文之间的换行符。
p:after {
display: block;
content: '';
margin: 10px 0;
}
对于这个简单的设置,它应该可以在大多数浏览器上正常工作。对于旧的浏览器,它们只会堆放所有内容,看起来仍然可以,并显示几乎一样多的推文。
您可以搜索Masonry插件,并隐藏底部位于其容器底部下方的元素。可能是固定高度容器的最佳解决方案。