Если вы столкнулись с проблемой, когда вам нужно разместить линию блоков друг под другом или же, когда нужно создать линию из блоков и чтобы они автоматически размещались друг под другом при нехватке места на экране, то вы можете использовать для этого простое свойство css - inline-block. inline-block удобен тем, что он может подстраиваться (быть адаптивным) под маленькие экраны или же автоматически смещать блоки друг под друга.
Хочется заметить, что inline block можно использовать для создания дизайна "metro" (дизайн такого типа используется в плитке windows 8 и "угробленного" windows phone lumia)

С картинки выше вы можете видеть, что есть несколько основных вариантов использования inline-block. Я опишу 3 варианта.
1 вариант - с сеткой из блоков, которые подстраиваются друг под друга.
2 вариант - вертикальная прямая линия из блоков
3 вариант - горизонтальная линия, которая будет заходить за границы экрана и прокручиваться.

Вариант 1.
Давайте попробуем для начала создать простой вариант с блоками, которые будут подстраиваться друг под друга при нехватке места.
Для начала поясню:
catalog - задает место, где будут располагаться блоки. Он же и задает максимальные границы (width:500), за которые блоки не могут заходить и будут автоматически подстраиваться друг под друга. Если в width:500 поменять на width:100%, то блоки будут смещаться только, когда дойдут до границ вашего экрана. Таким образом они станут адаптивными.
item - размер и свойства маленьких блоков. блок имеет размер 116 x 75 пикселей.

<h1>Каталог в три колонки</h1>
<div class="catalog">
<div class="item">Товар1</div>
<div class="item">Товар2</div>
<div class="item">Товар3</div>
<div class="item">Товар4</div>
<div class="item">Товар5</div>
<div class="item">Товар6</div>
<div class="item">Товар7</div>
<div class="item">Товар8</div>
</div>

css-код:

.catalog{
width:500px;
background:#ecf0f1;
box-shadow:0 0 3px #999;
font-size: 0px;
}
.item{
font-size: 18px;
display:inline-block;
margin-right:20px;
vertical-align:top;
width:116px;
height:75px;
margin-bottom:20px;
text-align:center;
background:#3498db;
color:white;
border:2px solid #2c3e50;
}

Как видите это достаточно просто. Вот работающий похожий пример с block-inline для наглядности.

See the Pen LYpZjrE by Lora Ug (@lora-ug)on CodePen.

Вариант 2.
Теперь попробуем сделать так, чтобы у нас получилась вертикальная прямая линия, как в варианте 2. Например, такую линию можно использовать при создании новостной ленты или боковой ленты сайта с новыми статьями. Это сделать ещё проще. Просто поменяйте значение в catalog с width:500 на width:150.
Как видите, catalog стал уже и item (блоки) подстроились под максимальный размер catalog (каталога).

.catalog{
width:150px;
background:#ecf0f1;
box-shadow:0 0 3px #999;
font-size: 0px;
}

Вариант 3.
Теперь создадим длинную линию, которая будет заходить за границы экранов смартфонов и компьютеров.
Для этого просто добавьте в catalog свойство overflow:scroll и измените width:500 на любое другое большое значение, которое больше вашего экрана. Например 1700.
scroll - добавить полосу прокрутки, если блоки будут заходить за границу.
Заодно добавим чуть больше блоков, чтобы было что прокручивать.

<div class="catalog">
<div class="item">Товар1</div>
<div class="item">Товар2</div>
<div class="item">Товар3</div>
<div class="item">Товар4</div>
<div class="item">Товар5</div>
<div class="item">Товар6</div>
<div class="item">Товар7</div>
<div class="item">Товар8</div>
<div class="item">Товар9</div>
<div class="item">Товар10</div>
<div class="item">Товар11</div>
<div class="item">Товар12</div>
<div class="item">Товар13</div>
<div class="item">Товар14</div>
<div class="item">Товар15</div>
<div class="item">Товар16</div>
</div>


.catalog{
white-space: nowrap;
overflow: scroll;
width:1700px;
background:#ecf0f1;
box-shadow:0 0 3px #999;
font-size: 0px;
}
.item{
font-size: 18px;
margin-right:20px;
vertical-align:top;
display:inline-block;
width:116px;
height:75px;
margin-bottom:20px;
text-align:center;
background:#3498db;
color:white;
border:2px solid #2c3e50;
}

Конечно, можно улучшить полосу прокрутки, но об этом я напишу в отдельной статье, чтобы не сбивать вас с главной темы этой статьи - inline-block.
Вообщем-то это и всё. Такая сетка из блоков может просто улучшить вашу жизнь за монитором, при создании сайта :). Ведь она не требует создания дополнительных float-ов, br-ов, таблиц и прочего ненужного кода. Более того inline-block подстраивается под мобильные экраны и может стать хорошей базой для создания адаптивного сайта.