Display inline block не работает

Display inline block не работает

Для того, чтобы элементы на странице располагались друг за другом мы можем использовать свойство dislpay: inline-block. Этот способ завоевал популярность как альтернатива использованию свойства float. В этой статье мы рассмотрим, как использовать inline-block и как справиться с проблемами, которые он вызывает.

Основы

HTML-элементы могут быть «блочными» или «инлайновыми». Блок inline-block ведет себя как сочетание того и другого. На самом деле это инлайновый элемент, который внутри ведет себя как блочный. Чтобы лучше понять свойства inline-block элементов, давайте взлянем на характеристики блочных и инлайновых элементов.

Инлайновые элементы:

  • Имеют значение свойства display равное inline
  • Имеют ширину равную ширине содержимого
  • Выстраиваются друг за другом горизонтально
  • Вертикальные отступы не могут быть заданы
  • Высота и ширина не могут быть заданы
  • Для управления позиционированием могут быть использованы свойства direction и text-align
  • Левый и правый отступы могут использоваться для управления горизонтальным позиционированием
  • Свойство vertical-align может быть использовано для управления вертикальным позиционированием

Блочные элементы:

  • Свойство display имеет значение block, list-item или table
  • По умолчанию имеют ширину равную ширине внутренней области своего контейнера
  • Выстраиваются друг за другом вертикально
  • Могут быть заданы высота и ширина
  • Отступы могут быть использованы для управления позиционированием

Display: inline-block

Мы можем объединить блочное и инлайновое поведение, задав блоку значение свойства display равное inline-block.

Internet Explorer 6 и 7 не поддерживают значение inline-block для элементов, которые не являются инлайновыми по умолчанию. Для таких случаев есть простое решение:

После этого блоки будут иметь следующие характеристики:

  • Блоки выстраиваются друг за другом горинтально
  • Могут быть определены высота и ширина
  • Отступы можно использовать для управления позиционированием
  • Свойство vertical-align может быть использовано для управления вертикальным позиционированием

Для чего используется inline-block

Вы можете задать блоку значение display: inline-block, если необходимо задать ширину/высоту или вертикальные отступы, и при этом блок должен остаться инлайновым. Также такой прием имеет ряд преимуществ по сравнению со свойством float, например:

  • Элементы остаются частью потока, поэтому не требуются clearfix’ы
  • Мы можем больше контролировать вертикальное выравнивание, используя свойство vertical-align и задавая ему значения top, middle или bottom
  • Не требуется дополнительная разметка, когда колонки имеют содержимое разной высоты
  • Центрирование колонок можно выполнить как с помощью отступов, так и с помощью свойства text-align: center

Если элементы имеют свойство display: inline-block, вы увидите, что стороны блоков «не касаются» друг друга. Между ними всегда есть небольшой «пробел». Это расстояние, которое отделяет слова друг от друга в предложении. Это «инлайновая часть» инлайн-блоков. Даже если на странице с такими блоками нет текста, между самими блоками все равно будут отступы. Это происходит из-за символов форматирования кода в редакторе: пробелы, табы, переводы строки. Хорошо, когда такой отступ повляется при установке ссылки на некоторое слово в предложении, но когда мы верстаем макет сетки, например, эти пробелы являются настоящей головной болью.

Читайте также:  Asus amd radeon hd 5450

Есть несколько способов удаления таких отступов. Я привел их ниже.

Удаление пробелов

Пробелы внутри тегов

Пробелы в комментариях

Обнуление размера шрифта

Этот метод заключается в установке размера шрифта в ноль. Размер пробелов зависит от размера шрифта, так что, когда мы устанавливаем размер шрифта в ноль — пробелы исчезают. Это решение осложняется при работе с относительными единицами, такими как em’ы, поскольку, если размер шрифта родителя равен нулю, все значения, основанные на em, так же будут равны нулю. Однако это работает с rem’ами. Кажется, это решение не совсем работает в Android. Я проверял в Android версий 2.2, 2.3.3, 4.1, 4.2 и 4.3 и в каждом их них находилась ошибка. Android 2.2 и 2.3.3 похоже полностью игнорируют размер шрифта. В Android 4.1, 4.2 и 4.3 пробелы исчезают не полностью. Строка из трех блоков (по 1/3) работает как ожидается, но в строке из 4 блоков (по 1/4) последний блок сдвигается на строку ниже.

Отрицательный правый отступ

Этот способ сводит на нет пробелы, устанавливая отрицательное значение для правого отступа, которое по меньшей мере равно размеру пробела. Поиск оптимального значения для этого отступа не так прост. Я обнаружил, что значение, которое сводит на нет пробелы, отличается среди различных браузеров и зависит не только от font-size, но и от масштаба при просмотре страницы.

Невидимый шрифт

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

Открытые теги

Если оставить теги открытыми, дополнительные пробелы также не появятся:

Это может быть не самое красивое решение, но оно проходит HTML-валидацию (не XHTML).

Удаление пробелов с помощью JavaScript

Удалить пробелы также можно с помощью JavaScript: http://codepen.io/hucklesby/pen/sDGaC

Оптимальные размеры отступов для удаления пробелов

Каков оптимальный размер правого отступа, чтобы убрать пробелы в разных браузерах? Я сделал несколько тестов, чтобы найти оптимальное значение для пяти основных настольных браузеров. Для этого я создал простой простой макет с двумя инлайн-блок колонками, убирав пробелы с помощью отрицательного правого отсупа. Затем я просматривал страницу с различными значениями отступа, размера шрифта и в разном масштабе. Я также обнаружил, что изменение ширины окна браузера также играет роль, делая пробелы видимыми или нет. Если при каком-то масштабе пробелы становились видимыми — браузер не проходил тест с этим отступом. Когда не было видно пробелов при любом значении отступа, я отмечал, что браузер «прошел тест» с данным отступом. В таблице ниже приведены размеры отступов, для которых бразуеры прошли тест.

Читайте также:  Fallout tactics brotherhood of steel редактор персонажа

Все браузеры, кроме Internet Explorer, были протестированы на OSX 10.9.1. Internet Explorer использовался на OC Windows 8 Pro.

Размер отступа, необходимый для удаления пробела

Fontsize:
9px
Margin value (em)
-0.24 -0.25 -0.26 -0.27 -0.28 -0.32 -0.34
Chrome 32.0
Firefox 26.0
IE 10.0
Safari 7.0.1
Opera 12.16
Размер отступа, необходимый для удаления пробела

Fontsize:
standard
Margin value (em)
-0.24 -0.25 -0.26 -0.27 -0.28 -0.32 -0.34
Chrome 32.0
Firefox 26.0
IE 10.0
Safari 7.0.1
Opera 12.16
Размер отступа, необходимый для удаления пробела

Fontsize:
72px
Margin value (em)
-0.24 -0.25 -0.26 -0.27 -0.28 -0.32 -0.34
Chrome 32.0
Firefox 26.0
IE 10.0
Safari 7.0.1
Opera 12.16

Значения отрицательного отступа находятся в диапазоне от −0.24em до −0.34em. Это покрывает большинство популярных десктопных браузеров и размер шрифта от 9px до 72px. Теперь давайте посмотрим, что происходит, если мы установим правый отстум в −0.32em и откроем страницу в IE, для которого необходимо значение −0.24em.

Синяя линия в увеличенном блоке — это выделение в IE developer tools. Оно показывает, что правый блок перекрывает левый больше чем на пиксель (0.32 — 0.24 * 16 = 1.28px).

Возможно, лучший способ избавиться от пробелов — это не использовать их совсем. Для наиболее важных частей страницы, таких как сетка, я думаю, лучше использовать способ «пробелы в комментариях». Конечно, это не самый лучший способ для дальнейшей поддержки, но гарантированно убирает пробелы.

Сетка с использованием inline-block

Давайте взглянем на inline-block в действии по поробуем создать сетку с его помощью. Для удаления пробелов я использовал HTML-комментарии. Первая строка показывает блоки, вертикально выровненные по центру. По умолчанию inline-block элементы имеют значение свойства vertical-align: middle. Строки 3 и 4 показывают поведение блоков с vertical-align: top и vertical-align: bottom. Центрирование элемента по горизонтали сделано с помощью свойства text- align: center, заданного контейнеру (.grid).

Читайте также:  Anti ghosting клавиатуры что это

Я относительный новичок в мире CSS, поэтому, пожалуйста, извините мое невежество! Я пытаюсь использовать следующий CSS для выравнивания двух divs по горизонтали:

К сожалению, если я не удалю display: inline-block из класса .portrait и замените его на float:left .portraitDetails блок div .portraitDetails div под первым блоком div. Что происходит?

Поскольку вы представили рабочий пример, проблема кажется более ясной.
Вам нужно просто удалить display: inline-block и width: 830px свойства width: 830px из правого div. Конечно, не забудьте добавить свойство float к нему.

Иногда люди забывают, какова цель свойства float . В вашем случае это образ, который должен иметь свойство float и только изображение. По умолчанию правый div будет оставаться на 100% ширине, пока изображение будет плавать слева.

СОВЕТ. Если текст из div достаточно длинный, чтобы плавать под изображением, и вы хотите сохранить его "отступом" в одной и той же точке, добавьте поле в div со значением, равным ширине изображения.

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

Не работает display:inline-block , блоки находятся в разных частях страницы, налазят на другие элементы. Как это исправить?

1 ответ 1

Если Вы хотите их разместить на одной линии, тогда вам необходимо взять два элемента в контейнер, например

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css вёрстка или задайте свой вопрос.

Похожие

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.11.15.35459

Ссылка на основную публикацию
Adblock detector