没有清晰列的 CSS 图像网格

Question

一位客户要求我修复他们的图像网格 CSS。虽然我认为他们只是为了让它正常运行而对 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>

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

Answer 2

这很难说，因为您没有给我们提供真实的使用示例，而是尝试将横幅上的高度设置为最低高度，并且 inages 会像这样自然溢出：

.banner{height:100px}

http://fiddle.jshell.net/gndLuqqy/