Question

我知道如何使用建议的here创建带有内联块的水平列，但是使用此技术时，第二行上的项目在具有不同高度时会显示垂直间隙。

我不想要瓷砖之间的垂直间隙。如何使用CSS摆脱它们？

我现在看起来像这样：

<div class="tilecontainer">
    <div class="tile">
        <div class="content">
            <strong>#1</strong>
            <p>Ut augue urna, tristique ut turpis quis, lobortis iaculis libero. Cras maximus rhoncus enim vitae blandit. Maecenas elit elit, vulputate sit amet velit volutpat, vulputate egestas sem.</p>
        </div>
    </div>
    <div class="tile">
        <div class="content">
            <strong>#2</strong>
            <p>Vestibulum ipsum quam, faucibus nec aliquet eget, molestie vel urna. Integer et dui mi.</p>
        </div>
    </div>
</div>

使用这个CSS：

.tilecontainer{
    width: 100%;
}
.tile{
    width:33.33333333%;
    display: inline-block;
    vertical-align: top;
    margin: -2px;
}

JSFiddle： http://jsfiddle.net/tg1a905r/1/

Answer 1

您可以使用CSS3列。不是跨浏览器解决方案，但您可以使用modernizr回退到IE和旧版浏览器中的当前布局。

这是父元素：

-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;

为避免列更改中的内容中断，请将其添加到内容中：

break-inside: avoid-column;
-webkit-column-break-inside: avoid;

请参阅更新的jsfiddle：http://jsfiddle.net/tg1a905r/7/

Answer 2

Masonry为我做了诀窍。作为Ruddy proposed。

无缝水平列

2 个答案: