Как расположить блоки горизонтально css

Идеальные горизонтальные блоки в HTML & CSS

Пропустим ту часть, где я говорю, что меня зовут Рималь и то, что я увлекаюсь версткой дизайна для сайтов, а именно HTML & CSS.

Также пропустим ту часть, где я рассказываю, что у меня была мечта создать идеальный шаблон с 100% адаптацией и кроссбраузерностью. В просторах интернета я не нашел нормального объяснения о создании N-колоночных блоков сайта, всегда и везде был кривой и некрасивый код.

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

Наша цель сделать 3-х колоночный сайт, блоки которого будут:

  1. Уменьшаться в зависимости от размера экрана (т.е. не будут уходить вниз);
  2. Растягиваться по всей ширине экрана (обычно это 2-х колоночный сайт);
  3. Адаптироваться при уменьшении заданных размеров.

Далее будет логично написать стили для этих классов, что мы и сделаем:

image

Размер окна браузера больше 900px

image

Размер окна браузера меньше 900px

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

Для того, чтобы растянуть дизайн на всю ширину экрана, достаточно удалить свойство max-width:700px в классе main .

Чтобы дизайн полностью не уменьшался при малых размерах окна, а адаптировался добавляем в стили @media запрос:

Более подробно можно посмотреть здесь — приветствуется любое изменение кода в лучшую его сторону.

Как разместить три блока горизонтально с помощью CSS?

Иногда для удобства и красоты дизайна сайта нам необходимо разместить три блока по горизонтали. Для этих целей используются каскадные таблицы стилей а именно CSS.

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

Теперь нам нужен код html самих блоков. Для этого создаем три дива и задаем им один и тот же класс primer:

Результат данной операции:

Первый блок

Второй блок

Третий блок

Как видите мы не просто добавили три блока горизонтально, но и добавили блокам границы (border) и тень при наведении (box-shadow)

Конкретно для внедрения теней при наведении создаем в стилях класс primer:hover, для этого копируем весь код ниже:

Непосредственно весь код стилей вы можете разместить на странице контента, без добавления в отдельный файл style.css, копируем код ниже, и вставляем его на страницу контента:

Выравниваем блоки по высоте

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

Для этого в стили в класс .primer добавляем две строчки:

Как видим блоки сровнялись по верхнему краю, и у всех задалась одинаковая высота:

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

Как вы сегодня могли убедиться разместить три блока горизонтально с помощью css не так уж и сложно. Таким же образом размещаются и 2 и 4 блока. Главное потом все это хозяйство выровнять по ширине и высоте.

Способы размещения блоков горизонтально

Часто на практике приходится решать задачу группирования и выравнивания контента средствами CSS. Сегодня мы рассмотрим основные способы размещения элементов в горизонтальный ряд.

Материал данной статьи призван помочь начинающим веб-дизайнерам в освоении приемов верстки web-страниц.

Размещение блоков горизонтально

Из чего выбрать или методы

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

  • метод «Float»
  • метод «Inline-block»
  • метод «Table-cell»

Каждый из них имеет свои преимущества, области применения и недостатки. Рассмотрим их по порядку.

«Для рывка» или немного теории

Все структурные элементы HTML можно условно разделить на:

Инлайновые (встроенные) – типа img, span и им подобные. У нас нет возможности менять их фон и задавать им произвольные линейные размеры.

Блочные – занимающие всю ширину родительского блока, всегда начинаются с новой строки – p, h, div.

Наглядный пример встроенных и блочных структур приведен ниже:

строчные и блочные элементы

Метод «Float»

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

Наиболее популярный (особенно среди начинающих верстальщиков), метод решения это использование свойства float.

CSS свойство float обрело большую популярность и практическую ценность после перехода от табличного способа верстки к блочному.

Float: left (right) трансформирует блочный элемент в плавающий, выравнивает по левому (правому) краю родительского блока и устанавливает обтекание справа (слева) текстом и другими элементами.

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

И внешнюю таблицу стилей с следующим содержимым:

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

размещение блоков float left

Иногда на практике бывает необходимо выровнять блоки по правому краю родительского элемента. Изменим обтекание блоков в предыдущем примере:

размещение блоков flooat right

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

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

В рассмотренном выше примере расстояния между блоками мы задавали при помощи отступа margin-right. Но что делать, если у вас при верстке страницы возникла задача: разместить блоки в ряд, центрировать их, да и еще чтобы отступы были только между ними, но никак не снаружи?

Алгоритм действий следующий.

В результате получаем такую картину:

центрированный Float left

Ну что же, всех практических ситуаций не рассмотришь, по этому перейдем к общим особенностям.

    Ширина блоков должна быть фиксированной. Иначе получите что-то такое:

float left без полей

Метод «Inline-block»

Как строчные так и блочные элементы имеют свои преимущества и недостатки в контексте каждой конкретной решаемой задачи. А что если объединить их преимущества?

Встречайте, гвоздь программы – свойство display: inline-block.

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

Блочно-строчный элемент имеет следующие свойства:

  • высота и ширина блока определяется автоматически по содержимому и значению отступов (padding)
  • высота и ширина блока может быть задана фиксировано
  • Отсутствует эффект схлопывания границ.

Рассмотрим пример создания простого навигационного меню, содержащего картинку и ссылку.

В результате получаем такую менюшку:

inline block

Как видим, получилось кривовато. Но расстраиваться мы не намерены, по-этому применяем к нашим дивам CSS свойство vertical-align (подробнее см. ниже):

Теперь наша навигационная панель выровнялась по верхней линии:

display inline block

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

  1. При уменьшении ширины окна обозревателя невмещающийся элемент перемещаеться вниз (как в случае float: left)
  2. Элемент, отображаемый как inline-block чувствителен к пробелам. Это приводит к тому, что даже при нулевых значениях margin между блоками будет зазор. Зазор этот зависит от применяемого шрифта. Для примера рассмотрим список:
    HTML:

Результатом рендеринга такого кода будет следующая картина:

inline block зазор

Есть несколько способов убрать зазоры:

    подобрать отрицательные значения margin:

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

inline block без зазора

    Для древних версий Firefox добавляем строчку:

Метод «Table»

Табличный подход долгое время был стандартом верстки, что в первую очередь объяснялось простотой и интуитивной понятностью разметки. Скорее всего, именно это и послужило причиной появления табличного форматирования в CSS.

Свойства display: table (table-cell, inline-table), позволяют выполнять табличное форматирование элементов без применения HTML таблиц.

Для горизонтального размещения блоков нам понадобится родительский элемент, имеющий свойство display: table, и дочерние элементы (ячейки), имеющие свойство display: table-cell:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *