Inline-block row

pattern for inline-block elements

by jorgeluis

HTML

<div class="ib-row">
    <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 {
    display: inline-block;
    box-sizing: border-box;
    padding: 1em;
    vertical-align: middle;
    
    /* optional max size */
    max-width: 20em;
}
img {
    max-width: 100%;
}