3

我想制作一个包含 3 列的布局。这 3 列由divs 组成，每列都包含一个可变纵横比的图像。我想将这些多高度 div 堆叠在 3 列中，以使它们之间的间隙（边距）在垂直和水平方向上相等。外部不应有边距/填充；即 3 列应跨越容器的 100%。

这是一个例子：

在此处输入图像描述

在较小的屏幕上，我会将 3 列折叠成 1 列，并将所有 div 垂直堆叠。

在我的小提琴中，我们可以看到我曾经column-count拥有 3 列。我的问题是将column-widthand设置margin-bottom为一个一致的值，它们会产生相同的间隙：容器宽度的 1.5%。

这是我使用的 CSS。.container包含许多.tilediv，每个 div 又包含一个未知尺寸的图像。孩子的数量divs也是未知数。

.container {
    width:100%;
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count: 3;
    column-gap: 1.5%;
    -moz-column-gap: 1.5%;
    -webkit-column-gap: 1.5%;
    border:1px black solid;
}
.tile {
    margin-bottom:9%;
}
.tile img {
    width:100%;
    height: auto;
    display:block;
}

的HTML：

<div class="container">
    <div class="tile">
        <img src="http://placekitten.com/g/100/200" alt="" />
    </div>
    <div class="tile">
        <img src="http://placekitten.com/g/100/130" alt="" />
    </div>
    <div class="tile">
        <img src="http://placekitten.com/g/100/200" alt="" />
    </div>
    <div class="tile">
        <img src="http://placekitten.com/g/100/200" alt="" />
    </div>
    <div class="tile">
        <img src="http://placekitten.com/g/100/125" alt="" />
    </div>
    <div class="tile">
        <img src="http://placekitten.com/g/100/50" alt="" />
    </div>
    <div class="tile">
        <img src="http://placekitten.com/g/100/150" alt="" />
    </div>
</div>

如何将每个 div 之间的间距（水平和垂直）设置为流动值？

4

0 回答 0