具有动态列数的 CSS3 列布局答案

【问题标题】：CSS3 column layout with dynamic number of columns具有动态列数的 CSS3 列布局
【发布时间】：2014-05-23 21:54:52
【问题描述】：

我有一组图像，我想按以下模式显示：

[1] [4] [7] [10] [13]
[2] [5] [8] [11] ...
[3] [6] [9] [12]

我知道我总是可以手动将 3 张图像组合成 div.column 或类似的东西，但我想用尽可能简单的 HTML 来实现这种布局。图片为 225x150。

目前，我有以下 HTML：

<div class='album'>
    <img src='img/01.jpg' />
    <img src='img/01.jpg' />
    ...
</div>

这是我的样式表：

.album {
    background: #faa;
    display: block;
    -webkit-column-count:2;
    -webkit-column-gap: 10px;
    height: 450px;
    width: 460px;

}
.album img {
    display: block;
    width: 100%;
}

规范中的Chapter 8.2 描述了如果我指定高度并且内容不适合，则根据需要创建更多列，这基本上正是我想要的。

如您所见，我为.album 指定了背景颜色。不过，这仅涵盖前两列，因为我将宽度设置为460px。但是，我确实需要一个具有专辑内容的确切大小/宽度的元素，即以该确切大小包裹专辑的元素。

我尝试过的所有可能性似乎都不起作用。（100%，auto，也和overflow一起玩过）

有人知道如何为我的相册创建这样的包装元素吗？

【问题讨论】：

标签： css layout overflow grid-layout

【解决方案1】：

你可能会因为这个目的而无法使用 Flexbox，因为在内联元素（inline-block 等）中使用列会导致一些浏览器错误地计算元素的宽度。

http://codepen.io/cimmanon/pen/vuxjF

.album {
  background: #faa;
  height: 480px;
  padding: 5px;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  -webkit-flex-flow: column wrap;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
@supports (flex-wrap: wrap) {
  .album {
    display: inline-flex;
  }
}

.album img {
  margin: 5px;
}

【讨论】：

感谢您的回答，但我的主要问题仍然存在。我如何使.album 具有适合其内容的最小宽度或将其包装在具有该大小的元素中？
另外，我将如何强制某些图像位于新列中？
高度迫使元素换行。 Webkit/Blink 显然对 inline-flex 的解释与 Presto 不同，并且它的工作方式与预期完全一样 :-(。不确定谁是正确的。
所以你的意思是你的 .album 总是和所有列合并的宽度一样？
是的，它会缩小以适应。不幸的是，这个问题可能没有纯 CSS 解决方案。

【解决方案2】：

With column-count, can you dynamically change from 3 to 2 columns if resolution smaller? 也提出了类似的问题。 CSS columns 回答有可能很好检查？（columns 是 column-width + column-count 的简写，参见the spec & codepen demo）。

请注意，浏览器支持有所不同，目前需要 -moz/-webkit 前缀 (http://caniuse.com/#search=column)。

【讨论】：