Пользователь
0,0
рейтинг
6 декабря 2012 в 07:31

Разработка → Inline-block как замена float

Полгода назад я делал перевод статьи на Хабре Подробно о свойстве float. В этот раз взглянем на него немного под другим углом. При разработке сайта мы часто используем float'ы для позиционирования некоторых блоков на странице, например сайдабара. Но так ли это необходимо?

Float не всегда удобен: например при верстке сетки с изображением. Иногда уместно применять inline-block, который имитирует поведение float'а.

Что такое inline-block?


Обычная структура блочного элемента:



Inline-block — это значение, которые можно назначить свойству display. Название происходит от некоторых характеристик как строчного, так и блочного элементов.

  • Блочные (block) элементы имеют высоту, ширину, padding, margin, border, а также располагаются вертикально, друг под другом.
  • Строчные (inline) элементы располагаются горизонтально, друг за другом.
  • Элементы inline-block обладают характеристиками как блочных, так и строчных элементов.


Inline block vs float: отличия




  • В отличие от float'а, inline-block находится в document flow — «потоке документа», поэтому нет необходимости применять clearfix или overflow: hidden. 
  • Очевидно, что float невозможно позиционировать по центру с помощью text-align: center.
  • Inline-block по умолчанию выравнивается по базовой линии, а float — по верхнему краю.
  • Если на странице несколько inline-block'ов, каждый из которых расположен с новой строки, то между ними будут некоторые промежутки.
  • Inline-block не поддерживается или поддерживается частично в IE6 и IE7


Посмотреть демонстрацию

Для борьбы с промежутками можно использовать несколько техник. Удаление пробелов в списках:

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>


Использование отрицательного значения margin:

nav a {
  display: inline-block;
  margin-right: -4px;
}


Странный способ с отсутствием закрывающего тега LI:

<ul>
  <li>one
  <li>two
  <li>three
</ul>


Установка значения font-size на ноль:

nav {
  font-size: 0;
}
nav a {
  font-size: 16px;
}


Более подробно об этих способах можно прочитать в статье CSS-tricks.

Что использовать?


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

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


Сетка изображений


Такие сетки используются в фотогалереях. На этом примере можно хорошо проиллюстрировать поведение inline-block и float. Использование float оправдано, если изображения имеют одинаковую высоту. Если же высота отличается, то элементы могут отображаться криво:



Inline-block'и не имеют такой проблемы, потому что располагаются на одном уровне в строке. Поэтому для верстки галереи лучше подойдет inline-block:



Посмотреть демонстацию

Вывод


Мы привыкли к использованию float для решения многих задач при верстке страниц. Однако иногда проще и удобнее применять inline-block. А иногда правильнее использовать старые добрые таблицы.

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

@grokru
карма
406,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (81)

  • +8
    > Странный способ с отсутствием закрывающего тега LI:

    Только для тех кто не читал спецификацию HTML — для некоторых тегов закрывающий тег необязателен (к XHTML это не относится).

    > Более подробно об этих способах можно прочитать в статье CSS-tricks.

    habrahabr.ru/post/138501/
    habrahabr.ru/post/137582/
    (возможно еще что-то было)
    • –1
      для некоторых тегов закрывающий тег необязателен

      Этой «особенностью» я бы пользовался в самом последнем случае, ибо вот jsfiddle.net/Softlink/YYwsd/
      • +5
        А div к ним не относится :) (http://www.w3.org/TR/REC-html40/index/elements.html, для html5 не нашел сходу ссылку)
        • +5
          Да, точно.
          Но все равно, как-то не по себе от незакрытых тегов :)
          • +11
            Крепитесь
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            Раз уж тему подняли эту. Решил побаловаться немного.
            По какому алгоритму закрываются дивы?
            Вот одна ситуация jsfiddle.net/Softlink/4kybd/ див сам закрылся.
            Вот вторая(производная от самого первого примера) jsfiddle.net/Softlink/6jRYy/
            Вложенные дивы вложились друг в друга и закрылись тоже. Получается, встретив любой элемент, он «понимает», что закрываться прямо сейчас не надо и дальше по лесенке до последнего элемента? Так?
            • НЛО прилетело и опубликовало эту надпись здесь
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Посмотрел статистику. IE7 — 1.6%. Я бы тоже забил.
      • +3
        инлайн-блок лучше смотрится в ІЕ7 чем в ІЕ6, но я согласен — пора забивать на 7мую версию. Хорошо что она легче сдается предыдущей версии )
    • НЛО прилетело и опубликовало эту надпись здесь
      • НЛО прилетело и опубликовало эту надпись здесь
        • НЛО прилетело и опубликовало эту надпись здесь
    • НЛО прилетело и опубликовало эту надпись здесь
      • НЛО прилетело и опубликовало эту надпись здесь
  • +2
    Флоат для сайдбара удобен тем, что если правильно все оформить, то убирая его, остальная часть контента будет автоматически на всю ширину.
    Есть еще способ для списков
    • one
    • two
    • three


    Так же убираются пробелы, а запрограммировать такое мне кажется проще
    • +1
      блин, редактор схавал код
      [ul]<|--
      -->[li]one[li]<|--
      -->[li]two[li]<|--
      -->[ul]

      тоесть использовать коментарии
      • 0
        Еще как способ расположить li элементы в одну строку [li]exampl1[/li][li]exampl[/li]
        • 0
          Это наверное самый простой способ, для программирования. На этапе верстки сложнее читать, но тут дело привычки наверное
  • 0
    Для борьбы с промежутками можно использовать несколько техник.


    В общем, хорошего способа нет.
    • НЛО прилетело и опубликовало эту надпись здесь
      • –1
        Переносы, Вы хотели сказать. Это плохой способ, вредящий читаемости кода.
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            Во-от, а хочется хорошего способа, бескомпромиссного.
            • 0
              Может мой понравится :)
              • +1
                Не просто не понравится, а совершенно неприемлем. У меня всегда XHTML.
                • НЛО прилетело и опубликовало эту надпись здесь
                  • 0
                    Во-первых, аккуратности ради, во-вторых, XSLT.
                    • 0
                      а вариант с комментариями не подходит? код остается вполне читабельным
                      • 0
                        Ага, а потом кто-нибудь в затмении увидит пустые комментарии и на автомате поудаляет, как мусор. И работоспособность кода нарушится.
                        • 0
                          А чего это кто-то должен удалять чужие строки? пусть свои удаляет :) Ну можно и комментарий оставить, что удалять ни-ни
                    • 0
                      Не знаю как вы пользуетесь XSLT, но в моих юзкейсах почти всё равно что на вход подаётся кроме самого XSLT-кода. Это может быть valid XML, well formed XML или IE-6 only HTML.
                      • 0
                        Не правильно сформированный XML на входе XSLT-шаблона? Или на выходе?
                • 0
                  Года два назад и я таки был :)
            • НЛО прилетело и опубликовало эту надпись здесь
            • +1
              Вы не это ищите?
              • НЛО прилетело и опубликовало эту надпись здесь
                • 0
                  Ничего, соблазн его использовать со временем ослабнет =)
              • 0
                Неплохой вариант, а на IE8 я могу себе позволить забить… Только наследование гарнитуры нарушится, так же как в варианте с нулевым фонтсайзом — наследование кегля.
                • 0
                  Ну да, font-family придется восстановить. Я для этого использую scss переменную $mainFont. Она сразу и базовый шрифт задает и помогает в этом случае. Не 100% универсально, но меня вполне устраивает.
                  • 0
                    Но тогда можно и нулевой фонтсайз использовать, даже и проще.
                  • 0
                    А ещё можно использовать rem (root em), вполне удобно.
          • 0
            С некоторых пор предпочитаю нечто вроде
            <ul><li><p>...
                    ...
                    <p>...
                <li><p>...
                    ...
                    <p>...
                <li>...
            </ul>
            

            В крайнем случае (при активном использовании атрибутов)
            <ul>
                <li>
                    <p>
                       ...
                    ...
                    <p>
                       ...
                <li>
                    <p>
                       ...
                    ...
                    <p>
                       ...
                <li>
                    ...
            </ul>
            


            Если закрывающие теги optional, то зачем их писать? а структуру показываю отступами.
        • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    image
  • +1
    Эх, где ж вы были вчера…
  • 0
    Во множестве шаблонизаторов, по крайней мере в PHP, есть удаление пробелов. Например в twig.
  • +7
    М-да, посты grokru просто нельзя пройти мимо. Просто сборник неточностей, недоговоренностей, плохих примеров и устаревших сведений.
    Опустим описание недостатков флоатов. Почему-то о них написано только в конце, а не в начале.
    Обычная структура блочного элемента:
    А что, есть необычная структура? Что означают буквенные сочетания на картинке?
    Блочные (block) элементы имеют высоту, ширину, padding, margin, border, а также располагаются вертикально, друг под другом.
    А строчные не имеют высоту, ширину, padding, margin, border?
    Элементы inline-block обладают характеристиками как блочных, так и строчных элементов.
    Ещё бы указать какие.
    Для борьбы с промежутками можно использовать несколько техник.
    С какими промежутками? Для тех, что между строк, и о которых говорилось ранее, достаточно поменять vertical-align.
    Странный способ с отсутствием закрывающего тега LI:
    Здесь всё сказали, закрывающий тег </li> — необязательный.
    Пропущен способ с комментариями:
    <ul>
        <li>one</li><!--
     --><li>two</li><!--
     --><li>three</li>
    </ul>
    

    Жаль, не всегда шаблонизаторы позволяют использовать техники с HTML-кодом.
    Установка значения font-size на ноль:
    Проглючит, если в браузере задан минимальный размер шрифта: в Опере, некоторых версиях Сафари, может быть и в других браузерах поставлен пользователем.
    Вывод
    Мы привыкли к использованию float для решения многих задач при верстке страниц. Однако иногда проще и удобнее применять inline-block. А иногда правильнее использовать старые добрые таблицы.
    Кэп!
    • +2
      Большинство постов уважаемого grokru не его — а такой себе микс переведенных статей. Несомненно, его труд заслуживает уважения, но в конечном итоге практическая ценность таких постов не слишком велика.
      Я ни в коем случае не хочу обидеть автора поста, более того, я благодарен за многие интересные статьи, но, мне кажется, что стоит лучше разбираться в том, о чем рассказывается в посте. И поддерживать общение в комментариях тоже было бы неплохо.
      • 0
        Вы правы. Обычно тема поста приходит на ум при решении какой-то практической задачи. Начинаю гуглить — нахожу интересные статьи, все они обычно расположены в англоязычных блогах. Я всегда даю ссылки на источники, а также на другие интересные сайты по теме. Многие авторы этого не делают, выдавая легкий рерайт-перевод за уникальный контент.

        А в обсуждениях участвую редко из-за нежелания разводить холивары. Внимательно отношусь к критике, отзывам и замечаниям в личке, Комментарии иногда бывают конструктивны, но это скорее исключение, чем правило.
    • +1
      Пользуясь случаем, тоже хотелось бы сказать пару слов grokru. Выскажу чисто своё имхо.

      grokru, я конечно понимаю, что, накатав быстрый пост на хабре, ты получишь новую карму, попиаришь свой сайт + продашь новые инвайты, как ты обычно делаешь. Но как бы ок, проблем нет, это твои дела, НО, почему бы тогда думать не только о себе, но ещё и о тех, кто будет читать твои посты?

      Я просто к тому, что я не против твоего бизнеса, но, имхо, о качестве продуктов и их пользователях тоже нужно заботиться.

      Почему я считаю, что тебе плевать? Всё просто. Во-первых, я читаю твои посты, в которых всегда куча неточностей: несоответствие спецификациям, важная недосказанность и т.д. Во-вторых, тебе абсолютно пофиг даже на то, что тебе пишут в комментариях. Ты никогда не исправляешь ошибки, на которые тебе указывают, показывая тем самым своё наплевательское отношение ко всем. И это касается не только твоих личных постов, но и переводов. В общем, всех твоих постов.

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

      За всё время ты накатал уже очеень мноога молниеносных статей, в каждой из которых было куча косяков, а теперь представь, сколько здесь сидит народа и сколько из них получили ошибочные знания, принимая их за правду. Может пора уже думать не только о себе?

    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        В том-то и дело что имеют. Их задать нельзя. А так прямоугольные блоки, о которых говорится в блочной модели имеют весь наоборот характеристик.
        • НЛО прилетело и опубликовало эту надпись здесь
          • –1
            Нет, там намешано.
            • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                Но «boxes» же имеют размеры, раз существуют.
                • НЛО прилетело и опубликовало эту надпись здесь
                  • 0
                    А элемент состоит из одного или нескольких прямоугольных блоков aka boxes (если только не скрыт посредством display:none).
                    • НЛО прилетело и опубликовало эту надпись здесь
                      • –1
                        А что необходимо узнать? См. CSSOM, getComputedStyle() и getBoundingClientRect()
                        • НЛО прилетело и опубликовало эту надпись здесь
                          • –1
                            Разве такая постановка задачи имеет смысл?
                            • НЛО прилетело и опубликовало эту надпись здесь
                              • 0
                                У каждого прямоугольного блока есть размеры, ровно как и другие свойства.
                                • НЛО прилетело и опубликовало эту надпись здесь
    • –1
      > в Опере, некоторых версиях Сафари, может быть и в других браузерах поставлен пользователем.

      Не знал, спасибо за информацию.
      • –1
        Пожалуйста, для того и комментарии.
  • +1
    ооох, примеры «Для борьбы с промежутками » частично безрадостны).

    1. «Использование отрицательного значения margin:»

    — только отступы между блоками зависят от размера текста, и что у вас 4px, то у другого 8px (см. системное увеличение размера шрифта, например)

    2. «Странный способ с отсутствием закрывающего тега LI»

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

    3. «Установка значения font-size на ноль:»

    — если работаете с em-ами, можете забыть об этом решении

    4. «Удаление пробелов в списках»

    — я бы назвал самым здоровым из всехх предложенных решений, но пример, конечно, кривоват. Гораздо нагляднее в коде будет выглядеть:

    .test-div{
      display: inline-block;
    }
    


       <div class="test-div">контент</div><!--
    --><div class="test-div">контент</div><!--
    --><div class="test-div">контент</div><!--
    --><div class="test-div">контент</div>
    


    Так вы хотя бы не будете ломать глаза, «кто на ком стоял» — что с чем и на каком уровне лежит.
    • +1
      > если работаете с em-ами, можете забыть об этом решении

      Rem (root em) от этого спасает. Не работает только в очень старых браузерах caniuse.com/rem
      • 0
        Как раз сегодня уже давал комментарий по этому вопросу в другой теме). От этого и «px» спасает ;).

        Как показывает практика, большинство наших клиентов (РФ + Европа) настаивают на поддержке того же IE, начиная с версии 8. И если с квадратными углами и отсутствием теней клиент, как правило, готов мириться, то с простыней одним кегелем — уже никак.
        Поверьте, я только за использование rem, и жду не дождусь, пока пожилые версии IE канут в лету, но суровые реалии таковы, что пока для этого немного рановато.

        Да и вцелом, об этом способе борьбы с отступами: использование общего правила для решения частной ситуации — плохая практика, действие по принципу «сначала создаем проблему, а потом ее решаем».
  • 0
    Inline-block по умолчанию выравнивается по базовой линии, а float — по верхнему краю.

    По какому-такому верхнему краю? Далеко не факт.
    • 0
      Удивительный float
      Всегда есть нюансы.
      • НЛО прилетело и опубликовало эту надпись здесь
        • +1
          Это не важно, мы живем в эру постоянно мигрирующих стандартов, поэтому нужно помнить, что знания, которые были получены в прошлом, не факт что будут работать в будущем. Кстати, помнится был драфт мультиколочного текста, при котором флоат мог принимать значение fr и располагаться между колонок. А еще нужно держать в голове, что для монгольского языка лево и право может быть далеко не слева и справа.

          • 0
            Для флоатов и подобных свойств право right и лево left именно визуальные. Если будет учитываться параметры вроде направления письма, то они будут особые значения вроде start и end.
  • 0
    из профиля
    >> хабраюзерам-новичкам дам совет по подготовке и оформлению топика.

    are you serious? судя по качеству публикуемых вами материалов… я бы посоветовал новичкам обойтись без вашего совета.

    статус вконтактика
    >> хабраюзер #1

    а вот тут все встает на свои места — как я предположил ранее, в посте который вы поспешно убрали в черновики (волнение за карму?), вы набиваете счетчик. Что же… меня это не очень удивляет. Меня поражает то, что пипл хавает. Неужели в сфере веб-разработки все так плохо? Хотя… с другой стороны, чем больше неучей — тем я ценнее как специалист, так что дерзайте )
  • 0
    Также для борьбы с промежутками можно использовать letter-spacing: -4px; но не работает в Safari.
    Очен правельно отметил Matrosked, что 4 пикселя у большенства и зависит от размера шрифта. Вообще не стоит разчитывать на них!
    Самый лучший способ — создовать HTML в котором отсутсвуeет whitespace между тагами.
  • 0
    Пока есть IE7, лучше пользоваться float. Но иногда другого выхода просто нет.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.