Хочется заметить, что 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 подстраивается под мобильные экраны и может стать хорошей базой для создания адаптивного сайта.
.png)
