0

我知道这可以用 来完成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;
}

这很好用，但是最后一行divs 都向左对齐：http: //jsfiddle.net/EsHh3/

我发现的唯一解决方案是添加额外的不必要div的 s：http: //jsfiddle.net/EsHh3/1/

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

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

4

4 回答 4

1

对于您想要做的事情，恐怕目前没有仅 CSS 的解决方案，更不用说如果您希望它在 IE8 中工作。

由于您希望 (a) HTML 源代码中的项目作为列表 (b) 可变数量的列取决于可用空间 (c) 列间距取决于容器的宽度我认为您需要的解决方案将有至少使用一点javascript。

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

如果您想坚持在标记中添加额外 DIV 的想法，另一种方法是监听调整大小事件，并DIV根据需要根据宽度和每行适合多少项目添加 s。

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

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

见小提琴

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和假元素之间有额外的空间。

于 2013-02-12T02:26:43.073 回答
0

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

于 2013-02-12T01:23:59.950 回答
0

你可以试试这个：

 .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;
}

更新网址

于 2013-02-12T01:24:49.213 回答
0

这就是我将如何去做：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>
于 2013-02-12T17:24:38.927 回答