Inline-block row

pattern for inline-block elements

by jorgeluis

HTML

<div class="ib-group ib-group--4">
    <div class="ib">
        block 1
    </div>
    <div class="ib">
        block 2
    </div>
    <div class="ib">
        block 3 with a lot of content to test text wrapping and other stuff
    </div>
    <div class="ib">
        <img src="http://placehold.it/200x100" alt=""/>
    </div>
</div>

CSS

.ib-group {
    margin: 0; padding: 0;
}
.ib {
    display: inline-block;
    box-sizing: border-box;
    padding: 1em;
    vertical-align: middle;
}
.ib-group--3 .ib {
    width: 33%;
}
.ib-group--4 .ib {
    width: 25%;
}
img {
    max-width: 100%;
}