Is there a way to create horizontal columns with inline-blocks, like the method described here, without having vertical gaps between items on the second line due to different heights?
I want to eliminate the vertical gaps between the tiles using only CSS. How can this be achieved?
This is how it currently appears:
<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>
Using the following CSS:
.tilecontainer{
width: 100%;
}
.tile{
width:33.33333333%;
display: inline-block;
vertical-align: top;
margin: -2px;
}
JSFiddle: http://jsfiddle.net/tg1a905r/1/