Question

我在div中有~170个小方形元素，我希望它们将自己排列成div所需的多行（这将随着浏览器的宽度而变化）。

<div id="container">
  <div class="sq"></div>
  <div class="sq"></div>
  <div class="sq"></div>
</div>

我知道我能做到：

#container .sq { float:right; }

用一些填充物使它们在右边收集并慢慢向下溢出 - 这样的事情：

. . . . . . .
. . . . . . .
. . . . . . .
      . . . .

其中每个点都是sq元素，但我真的想要一些溢出向上的东西，所以它们看起来像这样：

      . . . .
. . . . . . .
. . . . . . .
. . . . . . .

如果浏览器已调整大小，请

或者像这样：

    . . . . . . .
. . . . . . . . .
. . . . . . . . .

有没有人知道CSS中是否可以这样做？

Answer 1

实施的困难可能远大于对结果的渴望。您可以使用JavaScript / jQuery实现它，但我不确定它是否值得付出努力？

Answer 2

这是你需要的吗？

http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/

Answer 3

在IE8中，您可以说-ms-writing-mode: rl-bt。虽然writing-mode是CSS3 Text Layout工作的一部分，但目前草案规范中未包含此值。

在所有其他浏览器上，您需要一些脚本。例如，如果每个.sq都有float: right;，则可以从列表末尾开始向每个第n个元素添加clear: right。（其中n是您计算的平方数将适合宽度。）或者只是float: left;并向第一个平方添加margin-left以向远处推进它所需的权利。< / p>

自动行和CSS的列

3 个答案: