html - 没有清晰列的 CSS 图像网格

Question

一位客户要求我修复他们的图像网格 CSS。虽然我认为他们只是为了让 HTML 正常运行而在 HTML 上搞砸了很多，但似乎这个问题比我最初认为的更具技术性。

因为我想不出合适的关键词，谷歌也帮不上什么忙。

我的问题是: 横幅是png的。您可能会想到，底部的 3x1 横幅应与另一个 3x1 横幅的底部对齐。

如果我使用的是列(在本例中为 2)，这并不是真正的问题，但事实并非如此。由于有时一幅图像的宽度为多列，因此它们之间没有明确的界限。

HTML:

<div class="page-banners grid-container">
        <div class="grid12-6 banner">
                <img src="3x1.png" />
        </div>
        <div class="grid12-6 banner">
                <img src="3x2.png" />
        </div>
        <div class="grid12-6 banner">
                <img src="3x1.png" />
        </div>
</div>

CSS:

.grid12-6 {
    width: 48%;
}
.grid12-1, .grid12-2, .grid12-3, .grid12-4, .grid12-5, .grid12-6, .grid12-7, .grid12-8, .grid12-9, .grid12-10, .grid12-11, .grid12-12, .grid-full, .grid-col2-sidebar, .grid-col2-main {
    display: inline;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
}

改变

float:left;

到

display:inline-block;

没有达到目的，它只是让第一个 3x1 横幅与 3x2 的基线垂直对齐。

答案可能相当简单。但我花了很多时间盯着它看。

下面是一个示例(用 excel 制作)，如果插入了所有图像，页面可能会“看起来”。每种颜色作为横幅的占位符。

基本上，这就是我想要的，但没有 javascript。 http://desandro.github.io/masonry/demos/basic-multi-column.html

Answer 1

把图片放在一栏应该就够了，没试过

<div class="page-banners grid-container">
    <div class="grid12-6 banner">
        <img src="3x1.png" />
        <img src="3x1.png" />
    </div>
    <div class="grid12-6 banner">
        <img src="3x2.png" />
    </div>
</div>

你可能需要调整它们之间的间距