具有动态列数的CSS3列布局 [英] CSS3 column layout with dynamic number of columns

问题描述

我有一组要按照以下模式显示的图像:

I have a set of images that I want to display in the following pattern:

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

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

I know that I can always manually group 3 images into a div.column or something similar, but I want to achieve this layout with as simple HTML as possible. The images are 225x150.

目前，我有以下HTML:

Currently, I have the following 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%;
}

---

规范中的

第8.2章描述:如果我指定一个高度而内容不能容纳，则根据需要创建更多列，这基本上就是我想要的.

---

Chapter 8.2 in the specs describes that if I specify a height and the content won't fit in, more columns are created as needed, which is basically just what I want.

如您所见，我为.album指定了背景色.但是，由于我将宽度设置为460px，因此它仅覆盖了前两列.但是，我确实需要一个具有与相册内容完全相同的大小/宽度的元素，即一个以该大小包装相册的元素.

As you can see, I specified a background color for the .album. This does only cover the first two columns though, since I set the width to 460px. However, I really need an element that has the exact size/width of the album's content, i.e. an element wrapping the album with that exact size.

我尝试过的所有可能性似乎都无法奏效. (100%，auto，也与overflow一起播放)

None of the possibilities I tried seemed to work tho. (100%, auto, played with overflow as well)

有人对我如何为相册创建这样的包装元素有想法吗?

Does anyone have an idea on how I could create such a wrapper element for my albums?

推荐答案

您可能会为此而使用Flexbox，因为在内联元素(内联块等)中使用列会导致某些浏览器错误地计算元素.

You may be stuck using Flexbox for this purpose, since using columns within inline elements (inline-block, etc.) causes some browsers to miscalculate the width of the element.

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

这篇关于具有动态列数的CSS3列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！