仅使用 CSS,列似乎是最好的方法。
HTML
每条推文只是一对<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
此 CSS 用于容器。除了您的规范(宽度、高度、隐藏溢出)之外,它只是添加了列设置。
.threecol {
height: 200px;
width: 600px;
margin: auto;
overflow: hidden;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
这仅适用于您希望推文与@name
s 一致的风格。
p {
display: inline;
width: 30%;
}
<p>
这会导致 a和以下推文之间出现换行符。
p:after {
display: block;
content: '';
margin: 10px 0;
}
浏览器兼容性
对于这个简单的设置,它应该可以在大多数浏览器上正常工作。对于旧浏览器,它们只会将所有内容堆叠起来,看起来仍然不错,并显示几乎一样多的推文。
问题
- 如果一条推文包裹到(隐藏的)第四列,它可能会被切断。
- jQuery 报告列中元素的顶部/左侧和(看似不正确的)宽度/高度不正确。
- 这是基于 W3 标准的草案,语法可能会发生变化。也就是说,在这一点上它可能不会有太大变化。
备择方案
您可以搜索 Masonry 插件,并隐藏底部低于其容器底部的元素。可能是固定高度容器的最佳解决方案。