Самый простой способ уложить любое количество блоков в строку, это использовать calc()
для указания ширины и float: left
.
Верстка
<div class="whole">
<h1>Заголовочек</h1>
<div class="blocks">
<div class="block one">
<figure>
<p>абзац</p>
<figcaption><p>подпись</p></figcaption>
</figure>
</div><!-- class="block one" -->
<div class="block two">
<figure>
<p>абзац</p>
<figcaption><p>подпись</p></figcaption>
</figure>
</div><!-- class="block two" -->
<div class="block three">
<figure>
<p>абзац</p>
<figcaption><p>подпись</p></figcaption>
</figure>
</div><!-- class="block three" -->
</div><!-- class="blocks" -->
</div><!-- class="whole" -->
Стили
.whole { margin: 40px auto; padding: 0; width: 1100px; }
.blocks { height: 200px; width: 100%; }
.block { float: left; height: 200px; padding: 16px 0 0; width: calc(100% / 3); }
.one { background: green; }
.two { background: red; }
.three { background: blue; }
figure, figcaption { display: block; }
Результат в IE11

Результат в IE11
Пару дней назад я верстала макет очередного сайта на вордпресс™. Всё было хорошо, пока я не пошла проверить результат в IE. В IE9 и IE11 (скорее всего и в других версиях) третий блок из строки выползал на следующую строку и становился ровно под первым блоком при float:left
, либо, если ему отдельно назначить float:right
становился на следующей строке ровно под свободным пространством, где бы он должен был по идее находится.
Пришлось призадуматься. Оказывается, если в расчете ширины блока на 3 делить число, которое без остатка не делится (например, calc(1100px / 3)
), то ширина-то блока рассчитается, а вот в одну строку они не лягут.