Галерея

Как сделать с помощью css блоки в линию?

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

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

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

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

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

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

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

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

Источник

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

Блочные и строчные элементы отлично дополняют друг друга при вёрстке, занимая каждый свою определённую нишу. Но возникают ситуации, когда характеристик этих элементов явно недостаточно. Галерея фотографий, представленная на рис. 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. Макет из трёх колонок

Источник

Урок: блоки в одну строку CSS

Для того, чтобы выстроить блоки в одну строку с помощью CSS необходимо понимать, что выстраиваемые блоки представляют собой не просто какие-то разрозненные блоки, а группу. Понимая это необходимо объединить их. Объединение осуществляется с помощью заключения всех блоков в какой-то другой блок, который будет «родительским» по отношению к этой группе.

Группа блоков внутри родительского блока:

< div >Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст < / div >

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

Так как для дочерних блоков 100% ширины — это вся ширина родительского блока. Из этого следует, что для получения максимальной ширины дочернего блока, при расположении блоки в одну строку, надо воспользоваться формулой: 100 / 4 = 25, где 100 — это ширина родительского блока, а 4 — количество дочерних. Получается, что каждый блок должен быть не шире 25%, чтобы расположить блоки на одной строке.

Так как между блоками должно быть расстояние, чтобы они не «слипались», то необходимо рассчитать ширину отступа между блоками.

Количество отступов между блоками меньше количество самих блоков на единицу, то есть в данном случае отступов будет 3.

Если взять отступ равный 2%, то получится, что ширина каждого блока должна быть 23,5%: 4 * 23,5 + 3 * 2 = 100. Получается, что сумма всех ширин, включая отступы, по прежнему составляет 100%, как и должно быть.

Источник