Question

我用以下代码将一系列图像写入页面。

<div class="gallery">
    <div><img src="img1.jpg">stuff here</div>
    <div><img src="img2.jpg">stuff here</div>
    <div><img src="img3.jpg">stuff here</div>
    ....
</div>

我们的设计团队希望将这些图像分为两列。图像的数量是可变的，每个图像的高度也是可变的。他们要求的布局类似于以下内容。这个想法是每列的高度都相对相等-显然是不准确的。

+------+  +------+
|      |  |      |
|      |  |      |
+------+  |      |
+------+  |      |
|      |  +------+
|      |  +------+
|      |  |      |
|      |  |      |
|      |  +------+
|      |  +------+
+------+  |      |
+------+  |      |
|      |  |      |
~~~~~~~~  ~~~~~~~~
 undefined height

CSS Flex几乎根据需要布置图像，但是我无法弄清楚如何告诉flex将图像列表包装到第二列的位置。我不能设置容器的高度，因为单个图像的高度是可变的。尽管我可以使用PHP计算呈现页面之前的图像数量，但是图像的数量会随着时间而改变。

另一个障碍是，布局是针对移动设备的，但对于较大的屏幕（平板电脑为3列，台式机为4列）则有所不同。所以我不能只为列使用2 div。它必须是流动的。

实现此目标的最佳方法是什么？ Flex甚至是正确的工具吗？

到目前为止，我的代码仍然有效，但是我已经手动设置了高度

<div class="gallery">
    <div><img src="img1.jpg">stuff here</div>
    <div><img src="img2.jpg">stuff here</div>
    <div><img src="img3.jpg">stuff here</div>
    <div><img src="img4.jpg">stuff here</div>
    <div><img src="img5.jpg">stuff here</div>
    <div><img src="img6.jpg">stuff here</div>
    <div><img src="img7.jpg">stuff here</div>
    <div><img src="img8.jpg">stuff here</div>
    <div><img src="img9.jpg">stuff here</div>
</div>

<style>
   .gallery {
        display: flex;
        flex-direction: column;
        align-items: start;
        height: 1200px;
        flex-wrap: wrap;
    }

    .gallery > div {
        width: 50%;
        padding: 15px;
        text-align: right;
        position: relative;
    }

    img { 
        width: 100%;
        height: auto;
    }
</style>

可以将flex列精确地分成2个吗？

0 个答案: