无缝水平柱

Question

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

我不想要瓷砖之间的垂直缝隙。如何通过只使用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

砌体为我做了这个把戏。作为鲁迪。

Answer 2

您可以使用CSS3列。不是一个跨浏览器的解决方案，但是您可以使用现代化的方法回到您在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/