Галерея

inline-block: простое решение для сложных задач

В статье рассмотрены особенности работы свойства display со значением inline-block. Также приводится несколько практических примеров с применением данного свойства и решением ряда типичных проблем верстки.

Что это такое и как оно работает?

Свойство display определяет, как должен вести себя элемент на странице по отношению к остальным, а именно как он расположится. Существует, в принципе, 2 основных типа представления элемента на странице: блочный и строчный. Блочный элемент занимает все свободное место строки и перекидывает следующий элемент на новую. Строчные элементы располагаются в одну строку.

По отдельности эти формы представления блоков выполняют свои определенные задачи, однако в симбиозе могут охватывать достаточно широкий спектр задач. Именно поэтому был создан альтернативный вариант, который одновременно элементу присваивает функции блочного и строчного элементов — display со значением inline-block.

Блок внутри строчного элемента

Чтобы было понятнее типологию этого типа задач, представим, что нам надо вставить кнопку внутрь текста. То есть у нас будет массив какого-то текста, а где-то в определенном месте будет стоять кнопка с определенным задним фоном. Примерно это может выглядеть так

Как же это реализовать кодом? В этом нет ничего сложного, код довольно прост и в нем легко сориентироваться

div class="block0"> Lorem ipsum dolor sit amet, consectetuer span class="button">adipiscing elitspan>. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis sociis span class="button">montesspan>, nascetur ridiculus mus. Donec quam felis, ultricies nec, span class="button">pellentesquespan> eu, pretium quis, sem. div>

.block0 /*обвертка текстового блока*/  display:block; width:300px; margin:30px auto 0px auto; position:relative; text-align:center; > .button /*код кнопки*/  display:inline-block; background:#679bce; text-align:center; color:#fff; padding:3px 7px; border-radius:3px; height:23px; cursor: pointer; >

Устанавливаем элемент по центру, не зная ширины

Может возникнуть задача, когда необходимо блок или кнопку установить по центру контейнера. В этом случае нам снова может прийти на помощь комбинация блочных и строчных свойств.

К примеру, у нас имеется картинка, а снизу от нее будет расположена кнопка, при нажатии на какую можно будет оставлять комментарий. Эта кнопка должна располагаться по центру блока. Для этого нашей кнопке прописываем display: inline-block;. А родительскому тегу необходимо задать выравнивание текста по центру. Код этого решение будет выглядеть следующим образом:

div class="block0"> img width="250" src="img.jpg" title="Пример" alt="Картинка"> div class="button">Комментироватьdiv> div>

.block0  display:block; width:250px; margin:30px auto 0px auto; position:relative; padding:15px; background:#eee; text-align:center;/*центрирует нашу кнопку*/ > .button  display:inline-block; // display: inline; /* для IE6-7, которым неведом inline-block */ background:#679bce; text-align:center; color:#fff; padding:3px 7px; border-radius:3px; height:23px; cursor: pointer; margin-top:9px; >

В браузере это будет выглядеть так:

Выравниваем элементы списка с разной высотой

Довольно часто встречается ситуация, когда элементы списка имеют разную высоту. Если не внести дополнительных правок, картина получается не из лучших. Так как считается хорошим тоном дизайна сайта, когда у всех элементов одинаковые или пропорциональные отступы, а также все элементы выровнены под один уровень.

Для решения этой проблемы отлично подойдет свойство float, однако есть одно маленькое «но». Такое решение справедливо, если установлена фиксированная высота. Для универсальности будем рассматривать резиновые блоки, которые будут выравниваться при любой высоте и любом количестве текста.

Вторым решением, которое обойдет проблему высоты могут стать строки таблицы. Применение таблицы будет не рационально и отразит негативный эффект с точки зрения семантики. Можно конечно имитировать строки или ячейки таблицы через CSS, однако этому будет сопутствовать множество проблем.

Наиболее просто и действенный способ — опять обратиться к возможностям inline-block. Запишем следующий код:

ul> li>img width="150" src="img2.png" title="Пример1" alt="Картинка1"> Картинка 1li> li>img width="150" src="img2.png" title="Пример2" alt="Картинка2"> Картинка 2li> … ul>

.ul  display:block; width:330px; margin:30px auto 0px auto; position:relative; padding:5px; background:#eee; text-align:center;/*центрирует нашу кнопку*/ > li  display:inline-block; // display: inline; /* для IE6-7, которым неведом inline-block */ vertical-align:top; text-align:center; margin:5px 5px; width:150px; > img  display:block; width:150px; >

А вот так будет выглядеть наш практический пример в браузере

Кроме того, при использовании inline-block в комплексе с line-height можно заставить работать свойство vertical-align, которое предназначено для работы в текстовом блоке или в ячейках таблицы.

В каких браузерах работает?

Источник

CSS Layout — display: inline-block

Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element.

Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.

Compared to display: block , the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

The following example shows the different behavior of display: inline , display: inline-block and display: block :

Example

span.a <
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
>

span.b display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
>

span.c display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
>

Using inline-block to Create Navigation Links

One common use for display: inline-block is to display list items horizontally instead of vertically. The following example creates horizontal navigation links:

Example

.nav <
background-color: yellow;
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
>

.nav li display: inline-block;
font-size: 20px;
padding: 20px;
>

Grid of Boxes

It has been possible for a long time to create a grid of boxes that fills the browser width and wraps nicely (when the browser is resized), by using the float property.

However, the inline-block value of the display property can make this easier (but it is not flawless — see more examples below).

Examples

Floating boxes — using float (notice that we also need to specify a clear property for the element after the floating boxes):

Example

.floating-box <
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
>

The same effect can be achieved by using the inline-block value of the display property (notice that no clear is needed):

Example

.floating-box <
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
>

Источник

Строчно-блочные элементы

Блочные и строчные элементы отлично дополняют друг друга при вёрстке, занимая каждый свою определённую нишу. Но возникают ситуации, когда характеристик этих элементов явно недостаточно. Галерея фотографий, представленная на рис. 1 состоит из секций, в которые входит изображение с подписью к нему, при этом секции выстраиваются по горизонтали, занимая всю доступную ширину. При уменьшении окна браузера секции переходят на другую строку.

Если для формирования секций использовать блочный элемент, то он будет каждый раз начинаться с новой строки. Для строчных элементов нельзя задавать размеры всей секции. Одним из решений является применение строчно-блочных элементов, которые сочетают преимущества строчных и блочных элементов.

Строчно-блочный элемент можно определить, задав ему в стилях свойство display со значением inline-block .

Кроме того, в HTML существует ряд элементов, для которых значение inline-block задано по умолчанию: , , , .

Характеристики этих элементов следующие.

• Высота и ширина элемента вычисляется браузером автоматически, исходя из содержимого блока.
• Размеры содержимого можно устанавливать через свойства width и height .
• Ширина блока получается сложением значений width , margin , border и padding .
• Высота блока получается сложением значений height , margin , border и padding .
• Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
• Элементы можно выравнивать по вертикали с помощью свойства vertical-align.
• Перенос текста считается за пробел.

Чтобы создать галерею, представленную на рис. 1, в стилях для figure следует задать значение display как inline-block , а внутрь элемента добавить изображение и подпись к нему через (пример 1).

Пример 1. Создание галереи

Обратите внимание, что высота секций различается, поскольку в стилях высота никак не ограничена, в отличие от ширины. Выравнивание секций можно установить через свойство vertical-align , в данном примере выравнивание делается по верхнему краю с помощью значения top .

Строчно-блочные элементы также применяются для создания макетов веб-страниц. В качестве примера возьмём трёхколоночный макет, ширина колонок задаётся в процентах (пример 2).

Пример 2. Макет из трёх колонок

Колонки создаём с помощью элементов и в стилях для каждой колонки устанавливаем свойство display со значением inline-block , а также задаём выравнивание по верхнему краю через vertical-align . Поскольку padding оказывает влияние на ширину блока, то для упрощения добавляем box-sizing со значением border-box . После этого свойство width определяет уже ширину всего блока, а не его содержимого, как раньше.

Если посмотреть на результат примера (рис. 2), то последняя колонка оказывается где-то внизу и между колонок появился небольшой промежуток.

Рис. 2. Перенос колонки на другую строку

Это связано с особенностью строчных элементов, что перенос текста в коде воспринимается как пробел. Соответственно, этот пробел и виден между колонок, он же и оказывает влияние на общую ширину макета, что и приводит к переносу последней колонки на новую строку. Ей просто не хватает места.

Способов борьбы с этой особенностью несколько, они связаны как с редактирование кода HTML, так и воздействием через CSS. В HTML всё сводится к тому, чтобы не стало пробелов между закрывающим и открывающим тегами. Перечислим некоторые популярные методы.

Перенос атрибутов в на другую строку.

В HTML допустимо переносить закрывающую угловую скобку.

Использование комментариев в HTML.

Один из изящных способов борьбы с пробелом в HTML — использование комментариев. Это позволяет сохранить структуру кода без дополнительных переносов.

В CSS тоже есть несколько методов.

Отрицательный margin-right или margin-left . Способ не очень универсальный, поскольку величина отступа зависит от размера шрифта и настроек браузера.

Нулевой размер шрифта. Для родительского элемента ставим нулевое значение font-size , а затем для возвращаем его в желаемое значение.

После этих манипуляций с HTML или CSS колонки выстраиваются нужным нам образом (рис. 3).

Рис. 3. Макет из трёх колонок

Источник