Для того что бы расположить набор элементов в линию, проще всего воспользоваться Flexbox . С помощью этой технологии можно достичь следующих простых требований к макету:
Вертикального выравнивания блока внутри родителя.
Оформления всех детей контейнера так, чтобы они распределили между собой доступную ширину/высоту, независимо от того, сколько ширины/высоты доступно.
Сделать все колонки в макете одинаковой высоты, даже если наполнение в них различно.
class="container">class="box">
class="box">
class="box">
class="box">
.container /* Одного этого параметра будет достаточно чтобы элементы встали в ряд */display:flex;>.box/* стили элементов */background-color:#38d9a9;height:20px;width:20px;>
div элементы в одну строку
Используй display: inline-block или float: left на селектор .div1 Подробнее про выравнивание элементов.
Отслеживать
9,848 5 5 золотых знаков 29 29 серебряных знаков 59 59 бронзовых знаков
ответ дан 24 июн 2016 в 9:56
21 1 1 бронзовый знак
Пожалуйста, постарайтесь публиковать развернутые ответы содержащие конкретный пример минимального решения, дополняя их ссылкой на источник. Ответы–ссылки (как и комментарии) не добавляют знаний в Рунет.
28 ноя 2016 в 8:20
Все дело в том, что внутри — блочный элемент. Попробуйте так:
123
123
123
SPAN — inline элемент, но DIV — блочный. Результат — все в столбик.
Уберите везде DIV — получите результат в строку.
Для того, чтобы получить то, что хотите — можно указать не display: inline, а display: inline-block, либо делать через таблицы (не в тегах, а в стилях — например, display: table)
Как сделать с помощью css блоки в линию?
От автора: я приветствую вас. Необходимость представить несколько блоков на веб-странице в одну линию — очень частая задача, которая возникает перед верстальщиками. Она возникает при верстке практически каждого шаблона, поэтому всем нам в любом случае нужно знать и применять основные способы изменения поведения блоков.
Прежде чем мы посмотрим самые распространенные приемы, хотел бы вспомнить немного теории. Элементы веб-страницы делятся на блочные и строчные. И разница между ними очень проста — строчные могут располагаться в одну строку, а блочные — нет. Конечно, на этом различия не заканчиваются, но это основное отличие. Уже у блоков могут быть отступы сверху и снизу (у строчных — нет), а также к ним можно применять больше свойств.
Основные способы выстроить в css блоки в ряд
Есть мы не будем ничего усложнять, есть 3 основных способа:
Преобразовать блоки в строчные элементы. При этом блочные свойства теряются, поэтому этот вариант практически никогда не используется
Сделать нужные элементы блочно-строчными. Это специальный тип, при котором элемент сохраняет свои свойства, но в то же время позволяет другим блокам расположиться рядом.
Сделать элементы плавающими с помощью свойства float.
На этих вариантах остановимся. Флексбокс, табличное отображение и другие моменты рассматривать не будем. Итак, пускай у нас есть 3 подзаголовка.
Естественно, все css-свойства нужно прописывать в отдельном файле (style.css), который нужно подключить к html-документу. В этот файл я запишу минимальный стиль, чтобы просто было видно наши подзаголовки.
background : #EEDDCD;
Вот они на странице:
Есть они ведут себя как блоки. Кадый располагается на своей строке, между ними есть отступы. При желании также вы можете задать какие-угодно внутренние отступы и вообще сделать что угодно.
Преобразуем в строки и сразу добавим внутренние отступы. Для этого селектору h3 нужно добавить такие свойства:
display : inline ;
padding : 30px ;
Как видите, отступы применились не совсем корректно, это как раз потому, что мы имеем дело со строками. Если изменить отображение на блочно-строчное, отступы добавятся корректно. Для этого всего лишь меняем значение свойства:
display : inline — block ;
Есть 2 основные проблемы, которые возникают при использовании этого приема. Первая — это минимальный отступ. Образуется он из-за того, что в коде между блоками есть один пробел, который и образует этот отступ. Если эта проблема нуждается в решении, есть 2 основных варианта:
В html расположить код нужных блоков в одну линию без пробелов
Проставить отрицательный внешний отступ справа -4 пикселя. Именно столько занимает один пробел.
Вторая проблема — при разной высоте элементов могут возникать проблемы с отображением. В общем, наилучший вариант — плавающие блоки. Вместо display: inline-block пишем вот что:
float : left ;
И все наши заголовки третьего уровня теперь будут прижиматься к левому краю. Соответственно, также можно прижать их и к левому. При использовании этого приема вышеописанных проблем не возникает изначально.
Единственное, за чем вы должны следить в таком случае — отмена обтекания. Следующему блоку после плавающих нужно поставить свойство clear:both, чтобы он не пытался обтекать эти блоки, а расположился ниже, как и положено.
Блоки в линию с использованием фреймворка
Сразу скажу, что если вы собираетесь использовать любой нормальный css-фреймворк (например, Bootstrap) то там все еще гораздо проще. Весь css-код, отвечающий за расстановку элементов, уже написан и вам останется лишь задан правильные классы. Для этого достаточно изучить систему сетки, и вы сможете делать многоколоночные адаптивные шаблоны без особых трудностей. По крайней мере, это будет значительно проще, чем при написании css с нуля.
Еще одна проблема написания кода с нуля возникает как раз когда вам нужен адаптивный дизайн. Конечно, его можно реализовать самостоятельно, владея медиа-запросами, но это будет намного сложнее, если у вас сложный шаблон.
Например, когда у вас на больших экранах должно быть 4 колонки, на средних — 3, а на мобильных телефонах — 2. С помощью таких фреймворков, как Bootstrap, а точнее с помощью его сетки, реализовать подобное — дело буквально нескольких минут.
Плавно переводя тему на фреймворк Bootstrap, в очередной раз отмечу, что если перед вами стоит задача сверстать сложный адаптивный шаблон, то просто грех не воспользоваться сеткой. Для этого даже не обязательно подключать полную версию фреймворка – его можно кастомизировать и остановить там только то, что действительно вам нужно.
Научиться работать с фреймворком вы сможете с помощью нашего платного курса. Там объясняется и теория, но самое главное – есть практика. Вы сверстаете 3 адаптивных шаблона и получите отличный опыт, который позволит верстать сайты на заказ или для себя. А если вы хотите бесплатно ознакомиться с преимуществами и возможностями фреймворка, предлагаю вам просмотреть нашу серию статей по Bootstrap, а также бесплатный мини-курс по верстке простого макета. Желаю вам успехов в верстке и сайтостроении в целом.
10 современных раскладок в одну строку CSS-кода
Современный CSS позволяет разработчикам писать по-настоящему содержательные и надёжные правила с помощью всего нескольких нажатий клавиш.
1linelayouts
Все приведённые в статье примеры можно опробовать во встроенном выше Glitch, или посетив 1linelayouts.glitch.me
01. Суперцентрирование: place-items: center
В первом примере «однострочной» раскладки давайте решим самую главную загадку во всём CSS: центрирование. Хочу, чтобы вы знали, что ‘place-items: center’ это проще, чем кажется.
Сначала задайте родительскому элементу свойству display со значением grid , а затем для него же place-items: center . Свойство place-items это краткая форма записи для align-items и justify-items , с помощью которого мы устанавливаем оба эти свойства в значение center .
.parent
Данный способ приводит к идеальному центрированию содержимого внутри родителя, независимо от его размера.
02. Адаптивные блоки: flex:
Это распространённая раскладка, например, для лендингов, в которой может располагаться ряд из 3 элементов, обычно содержащих изображение, заголовок и текст, описывающих особенности продукта. Но мы хотим, чтобы эти элементы также аккуратно располагались и при просмотре страницы с мобильных устройств.
Если использовать Flexbox, вам не придётся настраивать расположение элементов для разных размеров экрана с помощью медиа-запросов.
Свойство flex является сокращением и позволяет задать набор значений flex:
Если нужно, чтобы блоки имели размер, сжимались на меньших размерах, но не увеличивались для заполнения дополнительного свободного пространства, следует указать flex: 0 1 . В данном случае равно 150px . Код будет следующим:
.parent < display: flex; >.child
Если вы хотите, чтобы при переносе на новую строку блоки растягивали и заполняли пространство, установите в значение 1 .
.parent < display: flex; >.child
Теперь при изменении размера экрана Flex-элементы будут и сужаться и увеличиваться в размере.
В этой демонстрации используется преимущество функции minmax для grid-раскладки. Мы устанавливаем минимальный размер боковой панели равным 150px , но на экранах бо́льшей ширины позволяем растягиваться на 25% . Таким образом, панель будет занимать 25% ширины родителя, пока эти 25% не станут меньше 150px .
Укажем эту функцию в значении свойства grid-template-columns . Элемент в первой колонке (в нашем случае это боковая панель) получает minmax между 150px и 25% , а второй элемент (в нашем случае это main ) занимает оставшееся пространство 1fr .
.parent
04. Липкий футер: grid-template-rows: auto 1fr auto
В отличие от примера с адаптивными блоками, здесь, при изменении размера экрана, расположение дочерних элементов не меняется. Как правило, называемая липким футером, эта раскладка часто используется как на вебсайтах, так и в мобильных приложениях, где футер это обычно панель инструментов.
Добавление display: grid к родительскому элементу создаст одноколоночную сетку. При этом, если в разделе «Main» будет недостаточно содержимого, чтобы достигнуть футера, данный блок всё равно увеличится, заполнив свободное пространство по высоте.
Чтобы прикрепить футер к нижней части, добавьте:
.parent
Высота хедера и футера будет установлена автоматически на основании минимального размера содержимого, а оставшееся свободное место ( 1fr ) займёт раздел «Main»
05. Классический «Святой Грааль»: grid-template: auto 1fr auto / auto 1fr auto
В данной раскладке присутствуют хедер, футер, левая и правая боковая панель, а также блок с основным содержимым. Он похож на предыдущий пример, но теперь с боковыми панелями.
Чтобы описать всю сетку с помощью одной строки кода, используйте свойство grid-template . Это свойство позволяет задавать значения для них обоих.
Записывается следующим образом: grid-template: auto 1fr auto / auto 1fr auto . Слеш разделяет значения для рядов ( grid-template-rows ) и колонок ( grid-template-columns ) сетки.
.parent < display: grid; grid-template: auto 1fr auto / auto 1fr auto; >
Как и в прошлом примере, где размер хедера и футера определялся автоматически на основании содержимого, здесь по такому же принципу определяется размер левой и правой боковых панелей. В этот раз речь о ширине, а не о высоте.
В этом примере мы рассмотрим другой классический пример: 12-колоночную сетку. Вы можете быстро создавать подобные сетки в CSS с помощью функции repeat() . Использование repeat(12, 1fr); для шаблона колонок сетки создаёт 12 колонок, каждая шириной 1fr .
Теперь мы можем разместить на ней дочерние элементы. Один из вариантов — использовать grid-линии. Например, колонка со свойством grid-column: 1/13 будет начинаться с первой и заканчиваться последней (13-й) линией, охватывая все 12 колонок. Со свойством grid-column: 1/5 — первые 4 колонки.
Другой способ размещения дочерних элементов — использование ключевого слова span . В этом случае задаётся начальная линия и количество колонок, которое нужно охватить, начиная со стартовой точки. Например, grid-column: 1 / span 12 будет аналогом grid-column: 1 / 13 , а grid-columns: 2 / span 6 — аналогом grid-column: 2 / 8 .
В этом примере мы объединим некоторые из рассмотренных концепций создания отзывчивого интерфейса с автоматически позиционируемыми и гибкими дочерними элементами. Довольно удобно. Ключевые термины repeat , auto-(fit|fill) и minmax() можно запомнить с помощью акронима RAM.
Всё вместе это выглядит так:
.parent
Снова применяется функция repeat() , но на этот раз вместо числового значения используется ключевое слово auto-fit . Это активирует автоматическое расположение дочерних элементов, для которых базовая минимальная ширина равна 150px но может увеличиваться до 1fr . Это значит, что на маленьких экранах они будут занимать 1fr ширины, а при появлении достаточного пространства, элементы, расположенные ниже будут перетекать в первую строку.
Если в родительском элементе освобождается дополнительное место, в режиме auto-fit дочерние элементы будут растягиваться, чтобы это место заполнить. Если же изменить режим на auto-fill , элементы не будут превышать базовый размер из функции minmax(, 1fr) .
.parent
08. Ряд карточек: justify-content: space-between
Ключевым моментом данной раскладки является свойство justify-content: space-between , которое размещает первый и последний дочерние элементы у края родителя, поровну распределяя доступное пространство между самими элементами. В нашем случае внутри карточек выбран режим раскладки Flexbox, с вертикальным расположением элементов, заданным с использованием flex-direction: column
Это размещает заголовок, описание и блок изображения в одну колонку внутри родительской карточки. Затем применяется свойство justify-content: space-between , прикрепляющее первый (заголовок) и последний (блок изображения) элементы к краям, а блок описания между ними.
.parent
09. Стилизация с помощью Clamp: clamp(, , )
Здесь мы познакомимся с технологией, менее поддерживаемой браузерами, но существенно влияющей на концепцию отзывчивого дизайна интерфейсов. В этом демо ширина задаётся с использованием функции ‘clamp’: width: clamp(, , ) .
Она позволяет задать минимальное, предпочитаемое и максимальное значение.
.parent
Здесь минимальный размер — 23ch или 23 единицы ширины символа, а максимальный — 46ch . Единицы ширины символа основываются на размере шрифта элемента (в частности, ширине глифа 0 ). Предпочитаемая или «фактическая» ширина карточки равняется 50%, что означает 50% ширины родительского элемента.
В этой ситуации функция clamp() позволяет элементу сохранять ширину 50% от родителя до тех пор, пока она не превысит 46ch (на больших экранах) или не станет меньше 23ch (на маленьких). Видно, что во время увеличения или уменьшения размера родительского элемента, ширина карточки соответственно увеличивается до максимального возможного или уменьшается до минимально допустимого размера. Также, она остаётся по центру родительского элемента, поскольку мы использовали для этого дополнительные свойства. Это обеспечивает больше удобства при чтении, так как блок текста не будет слишком широким (более 46ch ) или слишком сжатым и узким (менее 23ch ).
Это также отличный способ реализовать отзывчивый размер шрифта. Например, можно написать: font-size: clamp(1.5rem, 20vw, 3rem) . В этом случае размер шрифта заголовка всегда будет оставаться в пределах между 1.5rem и 3rem , но будет увеличиваться или уменьшаться в зависимости от размера экрана, соответствуя значению 20vw .
Это отличный способ обеспечить удобство чтения, но помните, что данное свойство поддерживается ещё не во всех современных браузерах, поэтому убедитесь, что не забыли про фолбек.
10. Сохранение пропорций: aspect-ratio: /
И, наконец, последний инструмент — самый экспериментальный из всех. Он был недавно представлен в Chrome Canary в Chromium 84, а Firefox ведёт активную работу над его внедрением, но пока что в стабильных версиях браузеров он не поддерживается.
Тем не менее, я хочу упомянуть и его, потому что он решает достаточно часто встречаемую проблему — сохранение пропорций изображений.
При использовании свойства aspect-ration , когда я изменяю размер карточки, зелёный блок сохраняет пропорции 16×9: aspect-ration: 16 / 9 .
.video < aspect-ratio: 16 / 9; >
Чтобы поддерживать соотношение сторон 16 x 9 без этого свойства, следует использовать хак с padding-top, задав padding 56.25%. Но сСкоро у нас появится свойство, позволяющее не прибегать к этому хаку и вычислению процентов. Можно сделать квадрат с соотношением сторон 1 / 1 или прямоугольник с соотношением 2 / 1 , или любым другим, необходимым для изображения определённых размеров.
.square < aspect-ratio: 1 / 1; >
Хотя эта функция все еще находится на стадии разработки, о ней полезно знать, поскольку она решает множество споров разработчиков, с которыми я и сама много раз сталкивалась, особенно когда речь идет о видео и фреймах.
Заключение
Благодарю, что ознакомились с этими 10 возможностями CSS. Чтобы узнать больше, можете посмотреть полное видео или поработать с демонстрацией.
