Question

我知道可以使用columns完成此操作，但我必须支持IE。

我正在尝试一种布局，其列的宽度都是固定的，排水沟是流动的。

我无法使用浮点数，因此我决定使用合理的inline-block项：

HTML

<div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <!-- more divs... -->
</div>

CSS

.wrapper {
    text-align: justify;
}

.wrapper div {
    width: 100px;
    display: inline-block;
}

这非常有效，但div的最后一行都与左边对齐：http://jsfiddle.net/EsHh3/

我找到的唯一解决方案是添加其他不必要的div：http://jsfiddle.net/EsHh3/1/

我对此感到不舒服，所以我想知道是否还有其他选择。

请不要告诉我不要重新发明轮子。我还没有发现任何支持流体排水沟的流体网格系统。

Answer 1

对于你想要做的事情，我担心目前还没有CSS解决方案，更不用说如果你想让它在IE8中运行了。

因为您希望将（a）HTML源代码中的项目作为列表（b）根据可用空间（c）列间距取决于容器的宽度，可变数量的列我认为您将使用的解决方案需要至少使用一些javascript。

考虑其他答案中提出的框架。我曾经和我一起工作过的人可以做你想做的事Masonry（或者付钱给更大的兄弟Isotope）。（还有一个非jQuery版本的Masonry）。您必须提出一个功能，在调整页面大小时，重新计算所需的装订线并重新配置框架。计算的内容x =根据容器宽度和项目宽度，每行适合多少项，然后将剩余空间除以x-1。

如果您想坚持在标记中添加额外DIV的想法，另一种方法是收听调整大小事件，并根据宽度和每个项目适合的数量添加DIV s线。

原始答案，未能符合所有标准。

由于你依赖于text-align: justified，最后一行没有扩展到全宽的原因是因为它的末尾没有换行符。因此，为了实现这一点，我们添加了一个带有wrapper:after {}规则的额外元素，这也是一个宽度为100％的内联块，因此它可以保证换行符。

See fiddle

CSS最终结果如下：

.wrapper {
    text-align: justify;
    width: 380px;
    margin: 0 auto;
}

.wrapper div {
    width: 100px;
    display: inline-block;
}

.wrapper:after {content: ''; width: 100%; display: inline-block; background: pink; height: 2px; overflow: hidden}

请注意粉红色背景，以便您可以看到元素的位置。您可能需要使用该额外元素或包装器的边框/边距/填充，以便wrapper之后的内容不会获得额外的边距。不幸的是，在Chrome中，最后一行的项目略有错位，可能是因为最后一个DIV和假元素之间存在额外的空间。

Answer 2

嘿我不知道为什么你想要一个流动的排水沟，但我有一个simple grid sample，你可能想看看，如果你想看到css，然后点击codepen网站上的SCSS。此外，如果您正在学习，那么此示例是如何制作自己的网格的非常好的起点。此外，为了避免自己重新发明轮子，你可能想尝试不同的网格框架。只是google css网格框架。

Answer 3

你可以试试这个：

 .wrapper {
    text-align: justify;
    width: 380px;
    margin: 0 auto;
    moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

Updated URL

Answer 4

我就是这样做的：http://codepen.io/jeremychurch/pen/wmtJz

.container {
  display: table;
  width: 100%; }
.cell {
  display: table-cell; }
.content {
  width: 15em;
  margin: 0 auto; }

<div class="container">
  <div class="cell">
    <div class="content">
    </div>
  </div>

  <div class="cell">
    <div class="content">
    </div>
  </div>

  <div class="cell">
    <div class="content">
    </div>
  </div>
</div>

固定宽度的柱子，带有流体排水沟

4 个答案: