Css элементы в одну строку. Строчно-блочные элементы. Блоки в линию с использованием фреймворка

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

Прежде чем мы посмотрим самые распространенные приемы, хотел бы вспомнить немного теории. Элементы веб-страницы делятся на блочные и строчные. И разница между ними очень проста — строчные могут располагаться в одну строку, а блочные — нет. Конечно, на этом различия не заканчиваются, но это основное отличие. Уже у блоков могут быть отступы сверху и снизу (у строчных — нет), а также к ним можно применять больше свойств.

Основные способы выстроить в css блоки в ряд

Есть мы не будем ничего усложнять, есть 3 основных способа:

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

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

Сделать элементы плавающими с помощью свойства float.

На этих вариантах остановимся. Флексбокс, табличное отображение и другие моменты рассматривать не будем. Итак, пускай у нас есть 3 подзаголовка.

Заголовок 1

Заголовок 2

Заголовок 3

Естественно, все css-свойства нужно прописывать в отдельном файле (style.css), который нужно подключить к html-документу. В этот файл я запишу минимальный стиль, чтобы просто было видно наши подзаголовки.

h3{ background: #EEDDCD; }

h3 {

background : #EEDDCD;

Вот они на странице:

Есть они ведут себя как блоки. Кадый располагается на своей строке, между ними есть отступы. При желании также вы можете задать какие-угодно внутренние отступы и вообще сделать что угодно.

Преобразуем в строки и сразу добавим внутренние отступы. Для этого селектору h3 нужно добавить такие свойства:

display: inline; padding: 30px;

Есть 2 основные проблемы, которые возникают при использовании этого приема. Первая — это минимальный отступ. Образуется он из-за того, что в коде между блоками есть один пробел, который и образует этот отступ. Если эта проблема нуждается в решении, есть 2 основных варианта:

В html расположить код нужных блоков в одну линию без пробелов

Проставить отрицательный внешний отступ справа -4 пикселя. Именно столько занимает один пробел.

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

Блоки в линию с использованием фреймворка

Сразу скажу, что если вы собираетесь использовать любой нормальный css-фреймворк (например, Bootstrap) то там все еще гораздо проще. Весь css-код, отвечающий за расстановку элементов, уже написан и вам останется лишь задан правильные классы. Для этого достаточно изучить систему сетки, и вы сможете делать многоколоночные адаптивные шаблоны без особых трудностей. По крайней мере, это будет значительно проще, чем при написании css с нуля.

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

Например, когда у вас на больших экранах должно быть 4 колонки, на средних — 3, а на мобильных телефонах — 2. С помощью таких фреймворков, как Bootstrap, а точнее с помощью его сетки, реализовать подобное — дело буквально нескольких минут.

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

Научиться работать с фреймворком вы сможете с помощью . Там объясняется и теория, но самое главное – есть практика. Вы сверстаете 3 адаптивных шаблона и получите отличный опыт, который позволит верстать сайты на заказ или для себя. А если вы хотите бесплатно ознакомиться с преимуществами и возможностями фреймворка, предлагаю вам просмотреть нашу серию статей по Bootstrap, а также по верстке простого макета. Желаю вам успехов в верстке и сайтостроении в целом.

Задача

Отобразить маркированый список горизонтально без маркеров.

Решение

Тег маркированного списка

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

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

    или

    Так вот, тег

  • также является блочным элементом.

    Чтобы тег

  • не вёл себя как блочный элемент, можно при помощи CSS сделать его строчным.

    За то, как элемент будет отображён в документе отвечает CSS свойство display . Рассмотрим три его значения (хотя их больше):

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

    Сначала сделаем горизонтальный список превратив его пунткы в строчные элементы. В стиле CSS пропишем правило, в котором селектору li установлено свойство display со значением inline .

    Список горизонтально

    Итак, этот стиль сработал и получили горизонтальное расположение пунктов списка:

    Рисунок 1. Работа примера №1.

    У этого метода есть недостатки. Дело в том, что inline элементы имеют некоторые ограничения, по сравнению с блочными элементами. Например им нельзя задавать ширину и высоту, а блочным можно.

    Например нам нужно чтобы элемент создаваемого нами меню имел ширину 150px и высоту 40px . Попробуем изменить стиль на следующий, то есть добавим два правила устанавливающих размер пункта меню:

    Эти правки не приведут ни к каким изменениям. Чтобы элементы меню располагались горизонтально и можно было устанавливать их ширину и высоту им нужно установить тип inline-block . Изменим код нашего примера:

    Список горизонтально

    Этот код работает и изменения видны:


    Рисунок 2. Работа примера №2.

    Но могут быть разные варианты, например нам нужно отобразить в меню вложенные списки:

    Вложенный список.

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


    Рисунок 3. Работа примера №3.

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

    А собственно, почему так происходит?

    Наши блоки имеют свойство display со значением inline-block . Это значит что у них есть качества как блочных элементов (возможность указать ширину и высоту), так и строчных элементов. То что мы наблюдаем - это качество строчных элементов.

    Давайте рассмотрим строку с символами "А" разной величины:

    А А А А А А А

    Мы видим что все буквы по вертикали выравнены по нижней линии. Точнее по базовой линии, но сейчас не будем влазить в дебри. Так вот, с нашими блоками произошло то же самое.

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

    Пока применим его к строке с символами "А" разной величины:

    А А А А А А А

    Кажется, что буквы немного "скачут". Я установил CSS границу border самой высокой букве, чтобы было видно, что скачков на самом деле нет, есть пустое пространство между верхней границей (по которой происходит выравнивание) и верхней точкой символа "А".

    Свойство vertical-align нужно применять к каждому строчному элементу, оно не наследуется. Вы можете прочитать подробней про это свойство: vertical-align .

    После этого отступления продолжим размещать элементы списка горизонтально.

    Второй способ

    Разместить элементы списка горизонтально можно используя свойство float . Это свойство указывает по какой стороне выравнивается элемент, имеет две позиции: left и right .

    Вот пример с использованием этого кода:

    Список горизонтально

    Вот результат работы кода:

    Рисунок 4. Работа примера.

    Вроде пример работает. Но в использовании этого свойства есть один нюанс. Сейчас мы его рассмотрим. Для примера возьмём код, в котором есть два горизонтальных списка с разным способом расположения элементов горизонтально: display и float :

    Список горизонтально

    Вот результат работы кода:

    Рисунок 5. Работа примера.

    В этих примерах контейнеры списка

      имеют красную границу толщиной 1 пиксел. Но верхний список, в котором используется свойство display , включает в себя элементы списка. А вот элементы списка созданного с использованием свойства float выпадают из своего контейнера.

      При этом на первый взгляд всё работает. Но давайте поменяем местами наши списки. Поставим список с классом menu-1 в коде перед списком с классом menu-2 (сейчас он ниже).

      Вот что мы получим в результате:

      Рисунок 6. Работа примера.

      Пункты нижнего меню также обтекают вержнее меню, ведь действие свойства float никто не отменял и оно распространяется на все последующие элементы.

      Как решить эту проблему?

      Для этого нужно использовать свойство clear , оно отменяет обтекание элементом другого элемента, если у того установлено свойство float .

      Вот изменённый пример с использованием свойства clear :

      Список горизонтально

      Видно что нижний список уже не обтикает верхний, элементы не наезжают друг на друга. Но в первом списке теги

    • всё ещё располагаются вне контейнера
        .

        Рисунок 7. Работа примера.

        Кроме того, в работе нам не всегда известно какой элемент будет следовать за элементом использующим float . Идеальный был бы вариант закрытия работы свойства float в том же блоке, в котором он открыт.

        Это делается при помощи псевдоэлемента. Вот код:

        Список горизонтально

        Теперь у нас 100% рабочий код.

        Рисунок 8. Работа примера.

        Этот приём со свойством float обычно используют при вёрстке сайтов для выравнивания столбцов, которые создаются тегами

        . Таким способом мы получаем нормальное построение столбцов с требуемым выравниванием по высоте. Когда мы создаём меню, то нам, в большенстве случаев, не важна высота блоков, она практически всегда одинакова. Поэтому использование правила {display : inline-block } в этих случаях вполне оправдано.

        Но для полноты раскрытия темы мы тут ознакомились со всеми возможными вариантами. Хотя может есть и другие способы, например использование CSS-таблиц, но поисковики настойчиво рекомендуют использовать таблицы только по их прямому назначению, а не для организации элементов навигации или ещё как-либо.

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

        И самое классное: адаптивность будет добавлена с помощью одной строки CSS.
        Это означает, что нам не нужно загромождать HTML лишними классами (Col-sm-4 , col-md-8) или создавать медиа-запросы для каждого размера экрана.

        Рассмотрим все подробнее.

        Настройка

        В этой статье мы продолжим работу с сеткой, которую мы использовали в моей первой статье по CSS Grid . Затем мы добавим изображения. Вот как выглядит наша начальная сетка:


        Вот HTML:

        1
        2
        3
        4
        5
        6

        Вот CSS:

        Container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; }
        Примечание. В примере есть базовые стили, которые я не буду рассматривать здесь, поскольку они не имеет ничего общего с CSS Grid.

        Начнем с того, что сделаем колонки адаптивными.

        Базовая адаптивность с единицей измерения fr (fractional unit)

        CSS Grid приносит с собой совершенно новое значение, называемое долей единицы. Доля единицы записывается как fr , и она позволяет разбить контейнер на столько частей, сколько захотите.

        Давайте изменим размер каждого столбца на 1fr.

        Container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 50px 50px; }
        Здесь происходит то, что сетка распределяет всю ширину на три части, и каждый из столбцов занимает по одной единице. Вот результат:


        Если мы изменим значение grid-template-columns на 1fr 2fr 1fr , второй столбец будет в два раза шире, чем два других столбца. Общая ширина теперь равна четырем единицам fr, второй столбец занимает две из них, а остальные - по одной. Вот как это выглядит:


        Другими словами, значение единицы fr позволяет вам легко изменять ширину столбцов.

        Расширенная адаптивность

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

        repeat()
        Мы начнем с функции repeat (). Это мощный способ указания столбцов и строк. Давайте возьмем исходную сетку и изменим ее используя repeat ():

        Container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 50px); }
        Другими словами, repeat(3, 100px) идентично 100px 100px 100px . В первом параметре указано, сколько столбцов или строк вы хотите, а второе определяет их ширину, поэтому это даст нам тот же самый макет, с которого мы начали:


        auto-fit
        Давайте вместо фиксированного количество столбцов, определим их автоматически, заменив 3 на auto-fit.

        Container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, 100px); grid-template-rows: repeat(2, 100px); }


        Теперь сетка меняет количество столбцов в зависимости от ширины контейнера.
        Браузер пытается разместить как можно больше столбцов шириной 100 пикселей в контейнере.

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

        minmax()
        Конечный ингредиент, который нам нужен, чтобы исправить это, называется minmax () . Мы просто заменим 100px на minmax (100px, 1fr) .
        Вот окончательный CSS.

        Container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(2, 100px); }

        Обратите внимание, что вся адаптивность прописывается в одной строке CSS.

        Это приводит к следующему поведению:


        И, как вы видите, это прекрасно работает. Функция minmax () определяет диапазон размеров, который больше или равен min и меньше или равен max.

        Таким образом, столбцы теперь будут всегда не менее 100 пикселей. Однако, если имеется больше свободного места, грид будет распределять место поровну каждому столбцу, поскольку столбцы будут занимать 1fr вместо 100 px.

        Добавление изображений

        Теперь последний шаг - добавить изображения. Это не имеет ничего общего с CSS Grid, но давайте рассмотрим код.

        Мы начнем с добавления тега изображения внутри каждого элемента грида.

        Чтобы изображение поместилось в элемент, мы установим его ширину и высоту, как и у самого элемента, а затем применим object-fit: cover ; . Это заставит изображение покрыть весь контейнер, и браузер обрежет его, если это необходимо.

        Container > div > img { width: 100%; height: 100%; object-fit: cover; }
        Вот что получится:

        Вот и все. Теперь вы знаете одну из самых сложных концепций в CSS Grid.

        Поддержка браузерами

        Прежде чем мы закончим, мне также необходимо рассмотреть поддержку CSS Grid браузерами. На момент написания этой

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

        Рис. 3.28. Галерея фотографий

        Если для формирования секций использовать тег

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

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

        Div { display: inline-block; }

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

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

        Чтобы создать галерею, представленную на рис. 3.28 для тега

        следует задать значение display как inline-block , а внутрь него добавить изображение и подпись через тег

        (пример 3.18).

        Пример 3.18. Использование display

        XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

        Галерея

        Софийский собор

        Польский костёл

        Купеческий клуб

        Памятник Св. Владимиру

        Поскольку все фотографии имеют одинаковый размер, ширина блока задана явно и равна 150px, но высота не указывается, поэтому при длинной подписи к рисунку высота секций будет различаться (рис. 3.29).

        Рис. 3.29. Разная высота секций

        Это не является проблемой, поскольку в любом случае секции будут выводиться упорядоченно рядами, несмотря на разную высоту. При этом можно изменить вид выравнивания через vertical-align , добавив это свойство к классу photo . Если указать значение top , то поменяется отображение секций (рис. 3.30).

        Рис. 3.30. Выравнивание по верхнему краю

        Основной проблемой выступает браузер IE до версии 7.0 включительно. Этот браузер применяет значение inline-block только для строчных элементов и с блочными элементами работает некорректно. Чтобы убедить этот браузер правильно отображать наш пример, необходимо вместо inline-block использовать значение inline и установить свойство hasLayout . Добавление inline разрушит макет в остальных браузерах, поэтому правильным решением будет воспользоваться условными комментариями (пример 3.19).

        Пример 3.19. Стиль для IE

        Конструкция означает применить указанный код для браузера IE версии 7.0 и ниже. Остальные браузеры воспринимают её как комментарий и игнорируют. Что касается свойства zoom , оно нестандартное и предназначено для установки свойства hasLayout , напрямую которое задавать нельзя.

        Также строчно-блочные элементы удобно использовать для различных каталогов товаров, которые встречаются в интернет-магазинах. Обычно они выводятся с картинкой и подписью к ней. Всё это похоже на галерею, сделанную выше, поэтому остаётся только модифицировать её код, учесть выравнивание по высоте и поведение IE (пример 3.20).

        Пример 3.20. Каталог товаров

        XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

        Каталог

        Видео 1856

        Фото 315

        Мобильные устройства 2109

        Компьютеры и орг.техника 4296

        Бытовая техника 731

        Результат данного примера показан на рис. 3.31.

        Рис. 3.31. Каталог товаров

        Чтобы не задавать каждому тегу

        , которых может быть довольно много, свой класс, в примере введён
        с идентификатором catalog и стиль применяется к тегам внутри него.

        Все элементы, которые встречаются на HTML-странице есть не что иное, как прямоугольники. И в основном только двух типов:

        1. блочные (blok), которые занимают всю ширину, где находятся, и отделены от того, что над и под ними. Например, это теги DIV, P, H.
        2. встроенные (inline). Например, SPAN, STRONG, EM, A и IMG.

        таблиц .

        Роль свойства возросла после перехода с table-верстки на div-верстку. Это объясняется тем, что float позволяет веб-разработчику включать столбцы не прибегая к таблице. Оно может принимать значения right , left , но не center .

        Ранее разметка страниц осуществлялась с помощью таблиц.

        Роль свойства float возросла после перехода с table-верстки на div-верстку. Это объясняется тем, что float позволяет веб-разработчику включать столбцы не прибегая к таблице. Оно может принимать значения right, left, но не center.

        С помощью свойства display: block; или display: inline; мы преобразуем один тип прямоугольника в другой. Например, список UL, который имеет ряд блоков LI, можно расположить горизонтально:

        • ПУНКТ
        • ПУНКТ
        • ПУНКТ
        • ПУНКТ
        • ПУНКТ
        • ПУНКТ

        При использовании свойства float прямоугольник является блочным, но с характерной особенностью: его ширина не будет распространяться на всё содержимое. Например, заголовок h3 выглядит как:

        это HEADER h3

        Если ему задать свойство display: inline;, то мы увидим, что изменилась не только ширина, но и расстояние над и под элементом:

        это HEADER h3

        Но если я хочу разместить элемент справа и добавлю на этот раз text-align:right;, то мы получим:

        это HEADER h3

        И совсем иначе, если float: right;. Обратите внимание, что расстояние над и под элементом остались неизменными:

        это HEADER h3

        А как поведут себя элементы, находящиеся рядом с заголовком?

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

        это HEADER h3

        А вот красный текст находится под заголовком и он будет его обтекать, не имея при этом никаких дополнительных стилей. И только высота h3 будет преодолена, страница вернётся к естественному порядку.


        А Б В Г Несколько плавающих элементов будут соблюдать последовательность своего расположения.

        АБВГтекст...


        А выравнивание производится по самому нижнему краю тех букв, которые находятся на одной стороне.


        А Б В Г Если мы ходим, чтобы обтекание элемента было прекращено с определённого момента (отсюда), применяется свойство clear. Его мы можем добавить в пустой тег


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


        Блок 1
        Блок 2
        Блок 3
        Блок 4
        А где расстояние между блоками? Если задать , то из-за того, что плавающим элементам не будет хватать пространства, они будут смещаться вниз.
        Блок 1
        Блок 2
        Блок 3
        Блок 4
        Вопрос решается путём добавления ещё одного DIV:
        Блок 1
        Блок 2
        Блок 3
        Блок 4

        Табличная вёрстка очень удобна и понятна, наверное, поэтому появился её аналог display: table;. Та же форма получается при меньшем использовании кода.

        Блок 1
        Блок 2
        Блок 3
        Блок 4
        , где border-spacing определяет горизонтальное и вертикальное расстояние между границами ячеек.

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

        текст...

        текст...


        Ссылки на источники: