3

这不是通常的 3 列布局问题 :-)

所以想象一下报纸上的分类广告部分(还记得吗?)......我有一个设计,我在屏幕上有一个固定大小的框(比如,600x200),分为 3 列,每列显示推文。所以推文会开始填满第一列,它们会继续堆积在第一列,直到我们找到一条不再适合的推文,所以它会被撞到下一列……等等。

这是我所追求的模型(我不得不删除每条推文上的名字,但你明白了):

在此处输入图像描述

这很棘手,因为目标是将尽可能多的推文放入框中,但我不知道每条推文会有多高……可能是一个词,也可能是全部 140 个字符,全部大写,这需要一个很多空间。封闭的盒子总是相同的大小,不能改变。所以我需要某种智能“流”,以便它知道何时移动到下一列并填充所有可用空间。有没有办法在 CSS/HTML 中做到这一点?

4

1 回答 1

5

仅使用 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;
}

这仅适用于您希望推文与@names 一致的风格。

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

<p>这会导致 a和以下推文之间出现换行符。

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

浏览器兼容性

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

当列被禁用时,推文被堆叠

问题

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

备择方案

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

于 2013-08-10T04:36:38.923 回答