没有明确列的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

很难说，因为你没有给我们使用真正的例子，但是尝试将横幅上的高度设置为最低点，并且这些内容会自然地溢出：

.banner{height:100px}

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