在固定高度框中显示具有可变高度内容的3列布局？

Question

这不是通常的3栏布局问题： - ）

想象一下报纸上的分类广告部分（请记住那些？）...我的设计中我在屏幕上有一个固定大小的框（例如600x200），分为3列，推文显示在每一栏。因此，推文将开始填充第一列，他们将继续堆叠在第一列，直到我们发布不再适合的推文，因此它将被碰到下一列......等等。

这是我所追求的模型（我必须删除每条推文上的名字，但你明白了）：

这很棘手，因为我们的目标是尽可能多地将推文放入包装盒中，但我不知道每条推文的高度......它可能是一个单词，它可能是全部140个字符，使用全部大写字母会占用很大的空间。封闭盒总是大小相同，不能改变。所以我需要某种智能的“流程”，因此它知道何时移动到下一列并填充所有可用空间。有没有办法在CSS / HTML中做到这一点？

Answer 1

仅使用CSS，列似乎是最佳方式。

demo

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符合要求的风格。

p {
  display: inline;
  width: 30%;
}

这导致<p>和以下推文之间的换行符。

p:after {
  display: block;
  content: '';
  margin: 10px 0;
}

浏览器兼容性

对于这个简单的设置，它应该可以在大多数浏览器上正常工作。对于旧的浏览器，它们只会堆放所有内容，看起来仍然可以，并显示几乎一样多的推文。

问题

1. 如果一条推文包裹在（隐藏的）第四列中，它就会切断。
2. jQuery报告列中元素的顶部/左侧和（看似不正确）宽度/高度不正确。
3. 这是基于W3标准的草案，语法可能会有所变化。也就是说，此时可能不会有太大变化。

替代

您可以搜索Masonry插件，并隐藏底部位于其容器底部下方的元素。可能是固定高度容器的最佳解决方案。