html — Блоки в одну строку
Хочу чтобы лого был на одной строке с меню, я это сделал.
Не подумайте, что это оскорбление, но я не увидел картинку и меню на одной строке.
Здесь я привел пример как Вы можете выстроить свой код, а снизу я расскажу в общем о выстраивании элементов в 1 линию/строку.
Все рассматривать не буду, расскажу только об основных, которые чаще всего используются на практике и хорошо себя зарекомендовали, для каждой задачи подход может быть разным.
Выровнить элементы в одну строку можно несколькими способами:
display: inline-block;
— данное свойство определяет элемент как строчно-блочный, другими словами выстраивает элементы в строку. ВНИМАНИЕ! Если не установить свойствоwidth
, блоки примут по умолчанию значение ширины всей страницы и от свойстваdisplay
не будет ни какого толку. Важно понимать что элементы встанут в одну линию если для них обоих (или более) будет задано свойство
при этом между ними не будет других элементов, с отличным от данного, свойством.
Пример:
.block {
height: 100px;
width: 100px;
border: 3px solid red;
display: inline-block;
}
<div>
<div></div>
<div></div>
<div></div>
</div>
float: left/right;
— Аналогичное по результатуdisplay: inline-block
, но отличное по принципам работы свойствоfloat
— в переводе с английского означает — обтекание. Если мы изменим наш предыдущий пример, то результат окажется точно таким же, но важное отличие состоит в том что данное свойство достаточно назначить одному элементу, а следующий в независимости от свойств встанет в одну строку с ним. Но это сработает только с заполненными элементами типа
с текстом внутри, а в данном случае элемент без свойства <p>float
встанет в тоже самое место что и предыдущий элемент. Для того что бы его подвинуть необходимо использоватьmargin-right
Пример:
.block {
height: 100px;
width: 100px;
border: 3px solid red;
float: left;
margin-right: 30px;
}
<div> <div></div> <div></div> <div></div> </div>
display: flex;
— c помощьюFlexbox
можно легко выравнивать элементы по горизонтали и по вертикали, менять направление и порядок отображение элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю. Для начала надо знать, что flex-элементы располагаются по осям. По умолчанию элементы располагаются по горизонтали — вдоль main axis — главной оси. Так же следует иметь в виду, что при использованииFlexbox
для внутренних блоков не работаютfloat
clear
иvertical-align
, а так же свойства, задающие колонки в тексте. И теперь родительскому(.container
) элементу добавляемdisplay: flex;
. Внутренниеdiv
-ы выстраиваются в ряд (вдоль главной оси) колонками одинаковой высоты, независимо от содержимого.
Пример:
.container {
display: flex;
}
.block {
height: 100px;
width: 100px;
border: 3px solid red;
margin-right: 30px;
}
<div>
<div></div>
<div></div>
<div></div>
</div>
Главную суть выстраивания элементов я передал, подробнее Вы сможете почитать в интернете. Снизу я приложу ссылки.
Подробнее о свойстве display: flex;
Вы можете почитать перейдя по этой ссылке.
Свойство display: inline-block;
ссылка
Свойство float: left/right;
ссылка
Выравнивание блоков на всю ширину (justify)
Как в горизонтальным меню, метод с justify и after 100% можно использовать для выравнивания других элементов в одну линию на всю ширину родителя.
1
Ссылки в одну строку
<div> <a href="#">Apple</a> <a href="#">Xiaomi</a> <a href="#">Гаджеты</a> <a href="#">Смартфоны</a> <a href="#">Аксессуары</a> </div>
.list {
text-align: justify;
}
.list:before{
content: '';
display: block;
width: 100%;
height: 0;
}
.list:after {
content: '';
display: inline-block;
width: 100%;
height: 0;
visibility: hidden;
overflow: hidden;
}
.list a {
font-size: 20px;
color: #0008ff;
}
2
Маркированный список в одну строку
<ul> <li>Apple</li> <li>Xiaomi</li> <li>Гаджеты</li> <li>Смартфоны</li> <li>Аксессуары</li> </ul>
.list {
text-align: justify;
margin: 20px 0;
padding: 0;
}
.list:before{
content: '';
display: block;
width: 100%;
height: 0;
}
.list:after {
width: 100%;
height: 0;
visibility: hidden;
overflow: hidden;
content: '';
display: inline-block;
}
.list li {
display: inline-block;
padding: 20px 0;
width: 127px;
text-align: center;
color: #fff;
background: #f99752;
font-size: 19px;
}
Div в одну линию
<div>
<div>Apple</div>
<div>Xiaomi</div>
<div>Гаджеты</div>
<div>Смартфоны</div>
<div>Аксессуары</div>
</div>
body { background: #eee; } .list { text-align: justify; margin: 20px 0; } .list:before{ content: ''; display: block; width: 100%; height: 0; } .list:after { width: 100%; height: 0; visibility: hidden; overflow: hidden; content: ''; display: inline-block; } .list-item { display: inline-block; padding: 20px 0; width: 110px; text-align: center; color: #fff; background: #ff7d7d; font-size: 60px; border: 5px solid #fff; }
flex-wrap — CSS | MDN
Свойство CSS flex-wrap
задает правила вывода flex-элементов — в одну строку или в несколько, с переносом блоков. Если перенос разрешен, то возможно задать направление, в котором выводятся блоки.
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;
Подробнее по свойствам и общей информации смотрите Using CSS flexible boxes.
Свойство flex-wrap
может содержать одно из следующих ниже значений.
Значения
Допускаются следующие значения:
nowrap
- Расположение в одну линию, может привести к переполнению контейнера. Свойство cross-start эквивалентно start или before в зависимости от значения
flex-direction
. wrap
- Расположение в несколько линий. Свойство cross-start эквивалентно start или before в зависимости отзначения
flex-direction
и свойство cross-end противоположно cross-start wrap-reverse
- Ведёт себя так же, как и
wrap
но cross-start и cross-end инвертированы. Formal syntax
nowrap | wrap | wrap-reverse
HTML
<h5>This is an example for flex-wrap:wrap </h5> <div> <div>1</div> <div>2</div> <div>3</div> </div> <h5>This is an example for flex-wrap:nowrap </h5> <div> <div>1</div> <div>2</div> <div>3</div> </div> <h5>This is an example for flex-wrap:wrap-reverse </h5> <div> <div>1</div> <div>2</div> <div>3</div> </div>
CSS
.content,
.content1,
.content2 {
color: #fff;
font: 100 24px/100px sans-serif;
height: 150px;
text-align: center;
}
.content div,
.content1 div,
.content2 div {
height: 50%;
width: 50%;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
.content {
display: flex;
flex-wrap: wrap;
}
.content1 {
display: flex;
flex-wrap: nowrap;
}
.content2 {
display: flex;
flex-wrap: wrap-reverse;
}
Results
BCD tables only load in the browser
Расположить элементы в одну строку в Вордпресс
Очень часто в бесплатных шаблонах тем на WordPress элементы (кнопки, содержание виджетов и пр.) располагаются друг под другом. Чтобы не начинать пляски с бубном вокруг этого безобразия проще прописать стили для элементов, которые надо разместить в одну строку.
Расположение блоков, элементов в одну строку на сайте Вордпресс:
Для примера возьмём три блока — шорткоды двух кнопок и текст
Для начала присвоим указанным элементам класс, допустим parent. Для этого обернём все элементы (блоки) в единую конструкцию.
<div>1 блок, 2 блок, 3 блок</div>
Так как между блоками должно быть расстояние, чтобы они не «слипались», то необходимо рассчитать ширину отступа между блоками.
Количество отступов между блоками меньше количество самих блоков на единицу, то есть в данном случае отступов будет 3.
Если взять отступ равный 2%, то получится, что ширина каждого блока должна быть 23,5%: 4х23,5 + 3х2 = 100. Получается, что сумма всех ширин, включая отступы, по прежнему составляет 100%, как и должно быть. Теперь в файле css или в консоли в «Дополнительные стили» прописываем стиль для присвоенного класса:
.parent {float: left; width: 23.5%; margin-right: 2%; padding: 10px;}
Расположение текста и изображения в одну строку на сайте Вордпресс:
Указанный выше стиль css работает только с блоками, шорткодами и прочими элементами. А как быть, если на странице требуется расположить текст и картинку в одну строку. Как правило, в шаблонах WordPress картинка сползает вниз. Или вообще ведёт себя не предсказуемо… На этот случай можно применить второй вариант.
При написании текста статьи из визуального редактора переходим в текстовый и нужные элементы (текст и картинку) помещаем в следующий код:
<div>Ваш текст и картинка</div>
В файле css или в консоли сайта прописываем стиль для этого класса:
.parent2 {display: flex; flex-direction: row; justify-content: flex-start;}
Вот как это выглядит на сайте. Изначально стрелочка выстраивалась под строкой:
Не забываем, что самое безопасное вмешательство в шаблоны вордпресс лучше производить через любой FTP клиент. Мне например, нравится Fazilla. Так же, стили можно прописать в Консоли сайта ВНЕШНИЙ ВИД — ДОПОЛНИТЕЛЬНЫЕ СТИЛИ. Это очень удобно — можно сразу визуально увидеть результат правки.
Блоки в одну строку
Для того, чтобы выстроить блоки в одну строку с помощью CSS необходимо понимать, что выстраиваемые блоки представляют собой не просто какие-то разрозненные блоки, а группу. Понимая это необходимо объединить их. Объединение осуществляется с помощью заключения всех блоков в какой-то другой блок, который будет “родительским” по отношению к этой группе.
Группа блоков внутри родительского блока:
<div> <div>Текст текст текст текст текст текст</div> <div>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div> <div>Тексттекст текст текст текст текст текст текст текст текст текст текст текст текст</div> <div>Тексттекст текст текст</div> </div>
Пусть будет известно, что будут располагаться блоки в одну строку и их количество будет равно 4-м, зная это можно рассчитать ширину блоков и отступов между ними в относительных величинах – в процентах.
Так как для дочерних блоков 100% ширины – это вся ширина родительского блока. Из этого следует, что для получения максимальной ширины дочернего блока, при расположении блоки в одну строку, надо воспользоваться формулой: 100 / 4 = 25, где 100 – это ширина родительского блока, а 4 – количество дочерних. Получается, что каждый блок должен быть не шире 25%, чтобы расположить блоки на одной строке.
Так как между блоками должно быть расстояние, чтобы они не “слипались”, то необходимо рассчитать ширину отступа между блоками.
Количество отступов между блоками меньше количество самих блоков на единицу, то есть в данном случае отступов будет 3.
Если взять отступ равный 2%, то получится, что ширина каждого блока должна быть 23,5%: 4 * 23,5 + 3 * 2 = 100. Получается, что сумма всех ширин, включая отступы, по прежнему составляет 100%, как и должно быть.
CSS определяющий ширину блока и отступ справа:
.parent > div { background: #eee; float: left; width: 23.5%; margin-right: 2%; }
Данный код означает следующее: все блоки DIV, являющиеся первым вложением в блок с классом parent должны обладать следующими свойствами: Цвет фона – серый, ширина блока – 23,5%, внешний отступ справа – 2% и размещение блока – слева.
При таком написании получается, что каждый блок имеет отступ, а нам необходимо, чтобы отступ был у всех, кроме последнего, так как иначе не получается расположить блоки в одну строку, поэтому нужно добавить дополнительное описание.
Обнуление отступа для последнего дочернего элемента группы:
.parent > div:last-child { margin-right: 0; }
Теперь отступы будут иметь все дочерние блоки, кроме последнего.
Если в каждом блоке написать какой-либо текст, то он прилипнет к границам блока, что не очень красиво, следовательно нужно сделать внутренний отступ, например равный 10px, а для того, чтобы подчеркнуть, что блоки являются отдельными, нарисуем им границы.
CSS примет следующий вид:
.parent > div { background: #eee; float: left; width: 23.5%; margin-right: 2%; padding: 10px; border: 1px solid #ccc; }
В этом случае блоки в одну строку снова перестанут умещаться, так как по умолчанию внутренние отступы и границы влияют на ширину блока увеличивая ее. То есть если блок имел ширину 23,5%, то после нововведений он будет иметь ширину 23,5% + 2 * 10 + 2 * 1 – ширина самого блока плюс ширина отступа с каждой стороны, плюс ширина рамки с каждой стороны. Чтобы ширина блока считалась с учетом внутренних отступов и рамок необходимо использовать свойство box-sizing.
CSS с указанием, что ширина блока должна учитывать внутренние отступы и границы:
.parent > div { background: #eee; float: left; width: 23.5%; margin-right: 2%; padding: 10px; border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Результат – блоки в одну строку:
Свойство flex-wrap — многострочная расстановка блоков по главной оси
Свойство flex-wrap задает многострочную расстановку блоков по главной оси.
Применяется к родительскому элементу для flex блоков. Входит в свойство-сокращение flex-flow.
Синтаксис
селектор {
flex-wrap: nowrap | wrap | wrap-reverse;
}
Значения
Значение | Описание |
---|---|
nowrap | Однострочный режим — блоки выстраиваются в одну строку. |
wrap | Блоки выстраиваются в несколько строк, если не помещаются в одну. |
wrap-reverse | То же самое, что и wrap, но блоки выстраиваются в другом порядке (сначала последний, потом первый). |
Значение по умолчанию: nowrap.
Пример . Значение wrap
Сейчас блоки не помещаются в свой контейнер и выстроятся в несколько строк:
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
border: 1px solid #696989;
height: 200px;
width: 330px;
margin: auto;
}
#parent > div {
width: 100px;
height: 50px;
border: 1px solid #696989;
}
:
Пример . Значение wrap-reverse
А теперь порядок следования поменяется на обратный (смотрите на цифры внутри блоков):
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row;
justify-content: space-between;
border: 1px solid #696989;
height: 200px;
width: 330px;
margin: auto;
}
#parent > div {
width: 100px;
height: 50px;
border: 1px solid #696989;
}
:
Пример . Значение nowrap
Сейчас блоки будут располагаться в однострочном режиме (так по умолчанию). При этом значение ширины width для блоков будет проигнорировано, если оно мешает блокам помещаться в родителя. Обратите внимание на то, что блоки поместились в родителя, но их реальная ширина не 100px, как им задано, а меньше:
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
border: 1px solid #696989;
height: 200px;
width: 330px;
margin: auto;
}
#parent > div {
width: 100px;
height: 50px;
border: 1px solid #696989;
}
:
Пример . Значение nowrap
Однако, если блоки помещаются при заданной им ширине — то свойство width не будет проигнорировано. Уменьшим количество блоков так, чтобы они все влезли:
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
border: 1px solid #696989;
height: 200px;
width: 330px;
margin: auto;
}
#parent > div {
width: 100px;
height: 50px;
border: 1px solid #696989;
}
:
Смотрите также
- свойство flex-direction,
которое задает направление осей flex блоков - свойство justify-content,
которое задает выравнивание по главной оси - свойство align-items,
которое задает выравнивание по поперечной оси - свойство flex-wrap,
которое многострочность flex блоков - свойство flex-flow,
сокращение для flex-direction и flex-wrap - свойство order,
которое задает порядок flex блоков - свойство align-self,
которое задает выравнивание одного блока - свойство flex-basis,
которое задает размер конкретного flex блока - свойство flex-grow,
которое задает жадность flex блоков - свойство flex-shrink,
которое задает сжимаемость flex блоков - свойство flex,
сокращение для flex-grow, flex-shrink и flex-basis
css — CSS, чтобы расположить один div под другим, который является float: left
У меня есть это:который отображается так:| Изображение …. |10 марта Нортгемптон, Массачусетс 01060| ………….. || _______________ |Но я хочу, чтобы это отображалось так:| Изображение …. |10 марта| ………….. |Нортгемптон, Массачусетс 01060| _______________ |Все поля извлекаются из записи базы данных WP динамически.В настоящее время css для поля March и других полей, связанных с датой, перед ним, чтобы выстроить их в одну строку, выглядит так для каждого поля:Мой вопрос заключается в том, какую css я могу применить, чтобы вызвать —- +: = 2 =: + —- div, и те, которые следуют за ним, начинаются со следующей строки под информацией о дате, а не с той же самойстрока с информацией о дате?Обратите внимание, что поля после —- +: = 3 =: + —- div ведут себя хорошо и все начинаются с собственных строк.Я добавил —- +: = 4 =: + —-, чтобы получить все поля даты в одной строке, а не в столбце.Эти div’ы находятся внутри другого div’а вместе с другими.То есть, без моего добавленного числа с плавающей запятой, оставленного для элементов даты, все они выстраиваются вертикально вниз по странице, один за другим.Div, следующие за —- +: = 5 =: + —-, начинаются с новой строки.Я хочу, чтобы элементы —- +: = 6 =: + —- были в одной строке.Обратите внимание, что —- +: = 7 =: + —- и —- +: = 8 =: + —- не сработало, так как слева от этих элементов находится изображениеэто подтолкнуло городское деление ниже этого, следующим образом:| Изображение …. |10 марта| ………….. || _______________ |Нортгемптон, Массачусетс 01060
2 ответа
0
используйте —- +: = 0 =: + —- в классе поле-значение wpbdp-field-citystatezip
ответил Sweety 22 AMpMon, 22 Apr 2013 08:17:50 +040017Monday 2013, 08:17:500
Вы можете использовать display: block для элемента, который содержит city /state /zip, чтобы начать новую строку.Удостоверьтесь, что только ваши поля даты имеют плавающее: слева от них.Если у города /штата /почтового индекса есть float: left, а также display: block, то он будет перемещаться влево настолько далеко, насколько это возможно, что будет справа от полей даты.Почему вы не можете просто поместить —- +: = 0 =: + —- между div, которые содержат ваши даты и город /штат /почтовый индекс?
ответил Joseph Myers 22 AMpMon, 22 Apr 2013 08:31:01 +040031Monday 2013, 08:31:01Похожие вопросы
Выровнять 2 тега DIV в одной строке в HTML
Выровнять 2 тега DIV в одной строке в HTML
Иногда нам нужно отображать 2 тега Div в одной строке в HTML.
По умолчанию, если у нас несколько тегов div, они будут отображаться один под другим. Другими словами, каждый div будет отображаться в отдельной строке.Чтобы отобразить несколько тегов div в одной строке, мы можем использовать свойство float в стилях CSS. Свойство float принимает left, right, none (значение по умолчанию) и наследуется как значения.
Значение left указывает, что тег div будет перемещаться слева и справа, чтобы перемещать тег div справа. Наследование значения заставляет тег div наследовать значение родительского элемента.
Следовательно, чтобы отобразить 2 тега div в одной строке, нам нужно разместить первый div слева, а второй справа, используя свойство css float.
Следующий фрагмент кода поможет нам в этом.
Первый раздел
Второй раздел
В приведенной выше разметке мы установили свойство float первого тега div влево, а свойство float второго тега div — вправо, что заставляет их отображаться в одной строке.
Совет:
Всегда лучше выделить стили css в отдельный класс css в отдельном файле вместо того, чтобы использовать его встроенные стили, как указано выше.
Примерно так, как показано ниже,
.leftdv
{
ширина: 80%;
Выравнивание текста: по центру;
поплавок: левый;
}
Первая дивизия
Как предотвратить переход div на следующую строку
Обновлено: 16.11.2019, автор: Computer Hope
HTML
В зависимости от того, почему вы хотите разбить div, также подумайте о теге . Это элемент встроенного уровня, который не переходит на следующую строку, если его поведение по умолчанию не будет изменено.
ПримечаниеЧтобы упростить использование и понимание этих примеров для всех типов пользователей компьютеров, мы используем атрибут style в div. Если вы собираетесь использовать любой из этих примеров на нескольких страницах, мы настоятельно рекомендуем создать кэшируемый файл CSS с настройками стиля в файле.
Ниже мы показываем блоки div разными цветами, чтобы показать, сколько места они занимают в том месте, где находятся на экране.
Поведение
Ниже приведен пример поведения div по умолчанию для блочного элемента Div one , занимающего первую строку содержащего его элемента, за которой следует второй Div two .
Div one
Div 2
HTML код
Div oneРаздел два
Установить размер и встроить
Поскольку они являются блочными элементами, при уменьшении размера Div one , чтобы освободить место для другого div, у вас останется место рядом с Div one и Div two ниже Div one .Чтобы переместить div на следующую строку, оба div должны иметь настройку отображения встроенного блока, как показано ниже.
Div one
Div 2
HTML код
Div oneРаздел два
Создание div с тремя столбцами
Ниже приведены несколько различных примеров div с тремя столбцами. Во-первых, нижеследующие три столбца div следуют той же идее, что и приведенные выше примеры, за исключением того, что они добавляют div.
Div one
Div 2
Div 3
HTML код
Div oneРаздел дваРаздел третий
Конечно, если вы хотите, чтобы блоки занимали 100% содержащего элемента, это становится немного сложнее.Ниже приведен один пример того, как вы можете создать три div рядом друг с другом, которые занимают 100% элемента. В приведенном ниже примере вместо того, чтобы хранить все div в одной строке с помощью встроенного блока, мы перемещаем левый и правый div.
Div one
Div 3
Div 2
HTML код
КончикDiv OneРАЗДЕЛ ТРИDiv Two
Хотя приведенный выше пример столбца с тремя div является адаптивным, можно также добавить дополнительную настройку, такую как скрытие Div three и регулировка ширины.
Полезных и интересных сайтов
Найдите ответ, как разместить два элемента div рядом в одной строке. Когда два элемента div размещаются один за другим на странице HTML, они отображаются в две строки. Обычно они оказываются друг над другом, а не бок о бок.
Здесь вы можете найти:
- как разместить два элемента div рядом с помощью встроенного блока
- Пример трех элементов div бок о бок с использованием встроенного блока
- как разместить два div рядом с помощью таблицы
Два элемента div бок о бок с использованием встроенного блока
Это первый блок с текстом.
Это второй div с текстом
Вот код:
Это первый элемент div.
Это второй элемент div.
Чтобы два элемента div отображались в одной строке : используется встроенный блок . Встроенный блок размещается встроенным (т. Е. В той же строке, что и смежный контент), но он ведет себя как блок.
Когда-нибудь вы захотите центрировать элемент div , используйте атрибуты margin-right: auto и margin-left: auto внутри атрибута стиля.
Три элемента div бок о бок с использованием встроенного блока
Код:
<стиль> .одна линия { ширина: 100 пикселей; высота: 100 пикселей; граница: сплошная 1px #ccc; дисплей: встроенный блок; }Это первый div
Это второй div
Это третий div
- в строках 1–9 определен стиль для класса oneline. «Дисплей : встроенный блок » используется, как и в предыдущем примере.
- : все три блока имеют класс oneline, поэтому они находятся в одной строке.
Два элемента div в одной строке с использованием float left
Это в новой строкеКод:
<стиль> .floatoneline {ширина: 100 пикселей; высота: 100 пикселей; граница: сплошная 1px #ccc; плыть налево; } .pageHolder { перелив: авто; ширина: 100%; }Это в новой строкеЭто первый div
Это второй div
Это третий div
Использование float: left — лучший способ разместить несколько элементов div в одной строке.Почему? Потому что у встроенного блока есть некоторые проблемы при просмотре в IE 9.
Класс pageHolder используется для очистки поплавков. Это как
но для фолатов.
Два элемента div бок о бок в одной строке с использованием таблицы
Код:
Первый div
|
Второй div
|
Выше приведен простой пример того, как разместить два блока div вместе в одной строке с помощью таблицы.Просто сделайте таблицу и поместите в одну строку два столбца с div внутри.
эквидистантных объектов с CSS | CSS-уловки
Просто расскажите мне о решениях, пожалуйста.
Создание горизонтального ряда объектов, находящихся на одинаковом расстоянии друг от друга, — еще одна вещь в веб-дизайне, которая намного сложнее, чем должна быть. Это может быть очень полезно, особенно в макетах с плавной шириной, когда вы пытаетесь максимально использовать имеющееся у вас горизонтальное пространство.
Вот цели, которых мы пытаемся достичь:
- Самый левый объект находится на выравнивании по левому краю с его родительским элементом.
- Самый правый объект находится на выравнивании по правому краю с его родительским элементом.
- Каждый объект всегда находится на равном расстоянии друг от друга.
- Объекты не перестанут перекрывать друг друга по мере сужения окна браузера.
- Объекты не будут завершать , когда окно браузера сужается.
- Техника будет работать в среде ширины текучей среды . Даже тот, что по центру .
Я пробовал разные техники, чтобы добиться этого. Давайте рассмотрим все мои неудачи, а затем перейдем к последней технике, которая, кажется, работает очень хорошо.
FAIL: присвоить каждому объекту процентное левое положение
Сначала я присвоил каждому изображению уникальный класс:
Затем я присвоил каждому из этих классов процентное левое позиционирование:
img.first-r {left: 0%; положение: относительное; }
img.second-r {осталось: 25%; положение: относительное; }
img.third-r {осталось: 50%; положение: относительное; }
img.third-r {осталось: 75%; положение: относительное; }
Обратите внимание на относительное расположение. Это необходимо для того, чтобы крайнее левое изображение соответствовало родительскому элементу, предполагая, что содержимое центрировано, а не выровнено по левому краю.Проблема заключается в том, что левое поле, применяемое к самому правому объекту, составляет 75% ширины окна браузера, , но применяется, начиная с левой стороны родительского элемента, а не окна браузера . Это может привести к тому, что крайний правый элемент оттолкнется от экрана (не учитывая правый край родительского элемента). Кроме того, необъяснимым образом, этот элемент в конечном итоге будет переноситься, если вы сдвинете окно браузера достаточно узким.
Если вы переключитесь на абсолютное позиционирование здесь, вы решите некоторые из вышеупомянутых проблем, но тогда ваши объекты будут выровнены по левому краю и полностью игнорируют левое положение родительских элементов.Кроме того, при достаточно узких размерах окна браузера изображения будут перекрываться. Но эй, по крайней мере, объекты были на одинаковом расстоянии!
FAIL: Дайте объектам общее левое процентное поле
Мой следующий удар заключался в том, чтобы дать каждому элементу , кроме первого , общий процент левого поля.
Применяя маржу:
img.mover {
маржа слева: 15%;
}
По этому проценту вы должны понять, что эта техника обречена. Я просто выбрал процент, который, казалось, работал лучше всего. Я не мог придумать ничего математического, что работало бы здесь. Поскольку родительский элемент — это процент от ширины окна браузера, а поле — это процент от окна браузера, а не родительский элемент, сопоставить темпы роста будет очень сложно.Также обратите внимание на интервал «no-wrap», который необходим для предотвращения… подождите… переноса. Но эй, по крайней мере, объекты были на одинаковом расстоянии!
НЕИСПРАВНОСТЬ: просто используйте таблицу!
Кажется, здесь не работает даже «бросить полотенце» на CSS. Я думал, что это сработает наверняка, поскольку таблицы обладают той иногда полезной, а иногда приводящей в ярость способностью автоматически распределять ячейки равномерно.
<таблица>
Обратите внимание на дополнительные классы выравнивания в первой и последней ячейках. Если все ячейки центрированы, это позволяет объектам быть равноудаленными, но тогда ни левый объект, ни правый объект не выровнены по краю родительского элемента.Это можно решить, применив выравнивание по левому краю к крайней левой ячейке и выравнивание по правому краю к крайней правой ячейке — , но тогда объекты больше не будут равноудаленными . Вернуться к доске для рисования.
ПРОЙДЕН: Обоснование Flexbox
Я добавляю это в июне 2015 года (семь лет спустя!), Потому что это лучшее решение (если вы умеете использовать flexbox).
.container {
дисплей: гибкий;
justify-content: пробел между;
}
См. «Эквидистантные объекты пера» Криса Койера (@chriscoyier) на CodePen.
ПРОДОЛЖЕНИЕ: сначала слева поместите остальные вправо в коробки одинакового размера
К счастью, идея стола заставила задуматься. Первое изображение необходимо выровнять по левому краю, но все остальные можно выровнять по правому краю. Фактически, если они есть, а также внутри ящиков, которые равномерно делят остальное пространство, это может просто сделать это.Возможно, лучше всего это объяснить визуально:
HTML:
CSS:
# movers-row {
маржа: -120px 0 0 120px;
}
# movers-row div {
ширина: 33.3%;
плыть налево;
}
# movers-row div img {
float: right;
}
Есть пример страницы, на которой я работал над этим. Это некрасиво … но вы можете увидеть победителя внизу. Я уверен, что у некоторых из вас есть лучшие решения для этого, так что позвольте мне это!
PASS: использование строчного и выровненного текста
Это можно сделать, установив элементы на display: inline-block;
и родительский элемент text-align: justify;
.Что ж, это немного сложнее, и я бы назвал это добросовестным трюком с CSS. Вы добавляете дополнительный элемент (через псевдоэлемент) шириной 100%, и предыдущие встроенные блоки выстраиваются в линию.
#container {
высота: 125 пикселей;
выравнивание текста: выравнивание;
граница: сплошной черный цвет 10 пикселей;
размер шрифта: 0.1px; / * IE 9/10 не любит font-size: 0; * /
минимальная ширина: 600 пикселей;
}
#container div {
ширина: 150 пикселей;
высота: 125 пикселей;
дисплей: встроенный блок;
фон: красный;
}
#container: after {
содержание: '';
ширина: 100%; / * Обеспечивает наличие как минимум двух строк текста, поэтому выравнивание работает * /
дисплей: встроенный блок;
}
Демо:
Оцените эту ручку!
Как с помощью CSS разместить два div рядом с одинаковой высотой?
<
HTML
>
<
головка
>
<
стиль
>
h2 {
выравнивание текста: по центру;
цвет: зеленый;
}
корпус {
ширина: 70%;
}
.контейнер .box {
ширина: 540 пикселей;
поле: 50 пикселей;
дисплей: стол;
}
. Контейнер. Ящик. Ящик-ряд {
дисплей: таблица-ряд;
}
.контейнер .box .box-cell {
дисплей: таблица-ячейка;
ширина: 50%;
отступ: 10 пикселей;
}
.container .box .box-cell.box1 {
фон: зеленый;
цвет: белый;
выравнивание текста: выравнивание;
}
.контейнер .box .box-cell.box2 {
фон: светло-зеленый;
выравнивание текста: выравнивание по ширине
}
стиль
>
головка
>
<
корпус
>
<
h2
> GeeksforGeeks
h2
>
<
div
class
=
«контейнер»
>
<
div
class
=
"box"
>
<
div
class
=
"box-row"
>
<
div
class
=
"коробка-ячейка box1"
>
Это хорошая платформа для изучения программирования.Это
образовательный сайт. Подготовка к рекрутингу
продуктовых компаний, таких как Microsoft, Amazon,
Adobe и т. Д. С бесплатной подготовкой к размещению в Интернете
конечно. Курс посвящен различным MCQ и кодированию
вопрос, который может быть задан в ходе собеседований и составляет
Ваш предстоящий сезон размещения эффективен и успешен.
div
>
<
div
class
=
"коробка-ячейка box2"
>
Также любой компьютерщик может помочь другим фанатам, написав статьи
на GeeksforGeeks, статьи публикуются после нескольких
шагов, которые требуют небольших изменений /
улучшения от рецензентов публикуются первыми.Кому
быстро рецензируйте свои статьи, пожалуйста, обратитесь к
существующие статьи, их стиль оформления, кодировка
стиля, и постарайтесь сделать вас ближе к ним.
div
>
div
>
div
>
div
>
корпус
>
html
>
3 способа отображения двух разделов рядом (float, flexbox, CSS grid)
Вот 3 способа использования CSS для размещения элементов HTML div рядом.
( Щелкните, чтобы перейти к каждому разделу)
Метод с плавающей запятой
В методе с плавающей запятой мы будем использовать следующую разметку HTML:
Столбец с плавающей запятой 1
Колонка с плавающей запятой 2
.float-container
- это просто родительский элемент, который содержит оба элемента .float-child
.
Чтобы расположить блоки рядом друг с другом, мы будем использовать следующие правила CSS:
. Плавучий контейнер {
граница: 3px solid #fff;
отступ: 20 пикселей;
}
.float-child {
ширина: 50%;
плыть налево;
отступ: 20 пикселей;
граница: сплошной красный 2px;
}
Полученный код будет выглядеть так:
Я добавил границы и отступы к div, чтобы вам было легче видеть, что происходит. Более толстая сплошная белая рамка снаружи - это .float-container
div с отступом 20 пикселей.
Тогда каждый элемент .float-child
имеет более тонкую красную границу и несколько дополнительных отступов. Тогда фактические цветовые блоки являются дочерними элементами элементов .float-child
. (Вы скоро поймете, почему.)
Чтобы расположить блоки div рядом, мы используем свойство float
, чтобы перемещать каждый элемент .float-child
влево.
Поскольку они оба плавают влево, они будут отображаться рядом, если для них достаточно места.Они подходят, потому что у нас есть два блока .float-child
, каждый с шириной 50%.
И пространство между div создается путем добавления отступа в каждый div .float-child
, который затем содержит цветные блоки.
Добавьте пространство между столбцами, вложив каждый столбец во внешний div
Необходимо, чтобы цветные блоки имели внешний div ( .float-child
), чтобы добавить пространство, а также чтобы оба блока располагались рядом.
Ну, а если бы у нас был только .float-child
div без заполнения, а вместо этого попытался добавить пространство, поместив значение margin-right
в первый блок, как это?
HTML:
Колонна с плавающей запятой 1
Колонна с плавающей запятой 2
CSS:
.float-child.green {
поле справа: 20 пикселей;
}
В данном случае оба .Элементы float-child
занимают 50% общей ширины. Но у первого зеленого элемента также будет поле 20 пикселей.
Это будет означать, что оба блока займут 50% + 20 пикселей + 50% ширины. Это будет на 20 пикселей больше, чем 100% ширины, а это значит, что для обеих сторон недостаточно места.
Затем второй синий блок перейдет в следующую строку под первым блоком и переместится туда влево:
Вы можете попробовать настроить ширину так, чтобы она составляла 48% или какое-то другое число меньше 50%, чтобы соответствовать им.Но это не будет точно.
Вот почему мне лично нравится оборачивать блоки во внешнем блоке div с шириной 50% с заполнением, чтобы добавить пространство между блоками.
В настоящее время проще использовать другие, более новые методы в CSS для размещения блоков div рядом, чем с float.
Давайте взглянем на один из них: метод flexbox!
Метод Flexbox
С помощью flexbox мы можем использовать более интуитивный способ выравнивания двух наших элементов div.
HTML:
Гибкая колонна 1
Гибкая колонна 2
CSS:
.flex-container {
дисплей: гибкий;
}
.flex-child {
гибкость: 1;
граница: 2 пикселя сплошного желтого цвета;
}
.flex-child: first-child {
поле справа: 20 пикселей;
}
Для flexbox мы установили display: flex
на родительский элемент .flex-container
. Это включает flexbox.
Затем в каждом элементе .flex-child
мы устанавливаем flex: 1
. Это число похоже на соотношение, сравнивающее ширину каждого дочернего элемента в родительском гибком элементе.
Поскольку они одинаковы, доступное пространство будет разделено поровну.А поскольку у нас есть два дочерних элемента, каждый из них будет занимать по 50%.
Вот как будет выглядеть получившийся код:
Добавьте пространство между div, используя поле, и оно все равно поместится!
Обратите внимание, что мы добавили пространство, добавив margin-right: 20px
только к первому элементу .flex-child
. Однако flexbox достаточно умен, чтобы учесть эти дополнительные 20 пикселей при разделении остальной доступной ширины.
Это означает, что вы можете добавить пространство с полем, не вычисляя точное количество пикселей.Flexbox подойдет для вас!
Это одна из главных причин, почему я люблю flexbox.
Однако, если у вас есть несколько элементов, которые вы хотите разместить в адаптивной сетке, вы не всегда знаете, где вам нужно добавить это пространство между элементами.
В нашем случае, если бы мы хотели разместить два блока div один под другим для мобильных устройств, нам пришлось бы удалить свойство margin-right
для мобильных устройств.
Или вы можете добавить дополнительный внешний элемент плюс отступ для каждого .flex-child
, аналогично тому, что мы сделали с методом float.
Это не на 100% интуитивно понятно, но все равно будет работать. Помните об этом, если вам нужно создать более сложные адаптивные макеты с помощью flexbox.
Давайте теперь взглянем на новейший метод, который вы можете использовать для размещения блоков div рядом: сетка CSS.
Метод сетки CSS
А вот как вы можете разместить два блока div рядом, используя сетку CSS:
HTML:
Столбец сетки 1
Столбец сетки 2
CSS:
.grid-container {
дисплей: сетка;
сетка-шаблон-столбцы: 1fr 1fr;
сетка-пробел: 20 пикселей;
}
А вот как будет выглядеть код:
Одно большое изменение в сетке состоит в том, что вы сначала определяете, как будет выглядеть шаблон сетки. Это означает, сколько столбцов и / или строк вы хотите в своем макете.
В нашем случае нам нужны два столбца одинаковой ширины. Итак, в родительском элементе .grid-container
мы включаем сетку с display: grid
.Затем мы добавляем, сколько столбцов мы хотим в нашем макете, с помощью свойства grid-template-columns
.
Нам нужны два столбца одинаковой ширины, поэтому мы устанавливаем значение 1fr 1fr
. Это указывает браузеру создать макет с двумя столбцами, и каждый столбец занимает 1fr
(fr = дробная единица) пространства.
Единица fr - это отношение каждого столбца к другому, аналогично правилу flex: 1
, которое мы использовали в методе flexbox. Если для столбцов установлено значение 1fr 1fr
, это означает, что каждый столбец будет занимать одинаковое количество места.
Добавление пространства между элементами сетки с помощью свойства grid-gap
Одним из больших преимуществ использования сетки CSS является то, что вам не нужно использовать отступы или поля для добавления пространства между элементами сетки.
Вы можете использовать grid-gap
(или grid-gap
в новых браузерах) для автоматического добавления места в свой шаблон сетки.
Мы установили grid-gap
на 20 пикселей, чтобы браузер знал, нужно добавить 20 пикселей между всеми элементами, независимо от того, расположены ли они рядом или расположены друг над другом.
И вы, возможно, заметили, что все свойства CSS для сетки были установлены для родительского элемента .grid-container
. На самом деле нам не нужно было писать какой-либо CSS для дочерних элементов .grid-child
!
Размещение на основе строк с помощью CSS Grid - CSS: каскадные таблицы стилей
В статье, посвященной основным концепциям макета сетки, мы начали смотреть, как размещать элементы в сетке с помощью номеров строк. В этой статье мы полностью исследуем, как работает эта фундаментальная функция спецификации.
Начать исследование сетки с пронумерованных линий - это наиболее логичное место для начала, так как при использовании макета сетки у вас всегда есть пронумерованные линии. Строки пронумерованы для столбцов и строк и проиндексированы от 1. Обратите внимание, что сетка индексируется в соответствии с режимом записи документа. На языке слева направо, таком как английский, строка 1 находится в левой части сетки. Если вы работаете с языком с письмом справа налево, то линия 1 будет крайним правым уголком сетки. Мы узнаем больше о взаимодействии между режимами письма и сетками в следующем руководстве.
В качестве очень простого примера мы можем взять сетку с 3 дорожками столбцов и 3 дорожками строк. Это дает нам по 4 линии в каждом измерении.
Внутри нашего контейнера сетки у меня есть четыре дочерних элемента. Если мы никоим образом не разместим их в сетке, они будут размещены в соответствии с правилами автоматического размещения, по одному элементу в каждой из первых четырех ячеек. Если вы используете Firefox Grid Highlighter, вы можете увидеть, как в сетке определены столбцы и строки.
.wrapper {
дисплей: сетка;
сетка-шаблон-столбцы: повторить (3, 1fr);
сетка-шаблон-строки: повтор (3, 100 пикселей);
}
Один
Два
Три
Четыре
Мы можем использовать линейное размещение, чтобы контролировать, где эти элементы располагаются в сетке.Я хотел бы, чтобы первый элемент начинался в крайнем левом углу сетки и охватывал дорожку из одного столбца. Он также должен начинаться с первой строки в верхней части сетки и охватывать четвертую строку.
.box1 {
начало столбца сетки: 1;
конец столбца сетки: 2;
сетка-начало-строки: 1;
конец ряда сетки: 4;
}
По мере того, как вы размещаете некоторые элементы, другие элементы в сетке будут по-прежнему размещаться с использованием правил автоматического размещения. Мы внимательно рассмотрим, как это работает, в следующих руководствах, но вы можете увидеть, как вы работаете, что сетка раскладывает неразмещенные элементы в пустые ячейки сетки.
Обращаясь к каждому элементу по отдельности, мы можем разместить все четыре элемента на треках строк и столбцов. Обратите внимание, что мы можем оставить ячейки пустыми, если захотим. Одна из очень хороших вещей в Grid Layout - это возможность иметь пустое пространство в наших проектах без необходимости перемещать объекты, используя поля, чтобы предотвратить подъем поплавков в оставшееся пространство.
Один
Два
Три
Четыре
.box1 {
начало столбца сетки: 1;
конец столбца сетки: 2;
сетка-начало-строки: 1;
конец ряда сетки: 4;
}
.box2 {
начало столбца сетки: 3;
конец столбца сетки: 4;
сетка-начало-строки: 1;
конец ряда сетки: 3;
}
.box3 {
начало столбца сетки: 2;
конец столбца сетки: 3;
сетка-начало-строки: 1;
конец ряда сетки: 2;
}
.box4 {
начало столбца сетки: 2;
конец столбца сетки: 4;
сетка-начало-ряд: 3;
конец ряда сетки: 4;
}
Сетка-столбец
и сетка-строка
сокращенные обозначения У нас здесь довольно много кода для размещения каждого элемента.Неудивительно, что есть сокращение. Свойства grid-column-start
и grid-column-end
можно объединить в grid-column
, grid-row-start
и grid-row-end
в grid-row
.
Один
Два
Три
Четыре
.box1 {
сетка-столбец: 1/2;
сетка-ряд: 1/4;
}
.box2 {
сетка-столбец: 3/4;
сетка-ряд: 1/3;
}
.box3 {
сетка-столбец: 2/3;
сетка-ряд: 1/2;
}
.box4 {
сетка-столбец: 2/4;
сетка-ряд: 3/4;
}
Диапазон по умолчанию
В приведенных выше примерах я указал каждую конечную строку и строку столбца, чтобы продемонстрировать свойства, однако на практике, если элемент охватывает только одну дорожку, вы можете опустить grid-column-end
или grid- значение конца строки
. По умолчанию сетка охватывает одну дорожку. Это означает, что наш первоначальный пример с длинной рукой будет выглядеть так:
Один
Два
Три
Четыре
.box1 {
начало столбца сетки: 1;
сетка-начало-строки: 1;
конец ряда сетки: 4;
}
.box2 {
начало столбца сетки: 3;
сетка-начало-строки: 1;
конец ряда сетки: 3;
}
.box3 {
начало столбца сетки: 2;
сетка-начало-строки: 1;
}
.box4 {
начало столбца сетки: 2;
конец столбца сетки: 4;
сетка-начало-ряд: 3;
}
Наше сокращение будет выглядеть как следующий код без косой черты и второго значения для элементов, охватывающих только одну дорожку.
Один
Два
Три
Четыре
.box1 {
сетка-столбец: 1;
сетка-ряд: 1/4;
}
.box2 {
сетка-столбец: 3;
сетка-ряд: 1/3;
}
.box3 {
сетка-столбец: 2;
сетка-ряд: 1;
}
.box4 {
сетка-столбец: 2/4;
сетка-ряд: 3;
}
Мы можем пойти дальше и определить каждую область одним свойством - grid-area
. Порядок значений для grid-area следующий.
- сетка-ряд-начало
- начало столбца сетки
- сетка конец ряда
- сетка-столбец-конец
Один
Два
Три
Четыре
.box1 {
площадь сетки: 1/1/4/2;
}
.box2 {
площадь сетки: 1/3/3/4;
}
.box3 {
площадь сетки: 1/2/2/3;
}
.box4 {
площадь сетки: 3/2/4/4;
}
Этот порядок значений для grid-area
может показаться немного странным, он противоположен направлению, в котором мы, например, указываем поля и отступы в качестве сокращения. Это может помочь понять, что это связано с сеткой, использующей относительные направления потока, определенные в спецификации CSS Writing Modes. Мы рассмотрим, как сетки работают с режимами письма в более поздней статье, однако у нас есть концепция четырех относительных направлений потока:
- блок-старт
- блок-конец
- рядный старт
- рядный конец
Мы работаем на английском языке с написанием слева направо.Наш блок-начало - это линия верхней строки контейнера сетки, конец блока - последняя строка строки контейнера. Наш inline-start - это левая строка столбца, поскольку inline-start всегда является точкой, с которой текст будет записываться в текущем режиме записи, inline-end - это последняя строка столбца нашей сетки.
Когда мы указываем нашу область сетки с помощью свойства grid-area
, мы сначала определяем обе начальные линии block-start
и inline-start
, затем обе конечные линии block-end
и inline-end
.Сначала это кажется необычным, поскольку мы привыкли к физическим свойствам верха, правого, нижнего и левого края, но имеет больше смысла, если вы начнете думать о веб-сайтах как о разнонаправленных в режиме письма.
Мы также можем отсчитывать в обратном направлении от блока и до конца сетки, для английского языка это будет правая линия столбца и линия последней строки. Эти строки могут быть адресованы как -1
, и вы можете отсчитывать оттуда, поэтому предпоследняя строка будет -2
. Стоит отметить, что последняя строка является последней строкой явной сетки , сетки, определяемой grid-template-columns
и grid-template-rows
, и не принимает во внимание какие-либо добавленные строки или столбцы. в неявной сетке за ее пределами.
В следующем примере я перевернул макет, с которым мы работали, работая справа и снизу нашей сетки при размещении элементов.
Один
Два
Три
Четыре
.box1 {
начало столбца сетки: -1;
конец столбца сетки: -2;
начало строки сетки: -1;
конец строки сетки: -4;
}
.box2 {
начало столбца сетки: -3;
конец столбца сетки: -4;
начало строки сетки: -1;
конец строки сетки: -3;
}
.box3 {
начало столбца сетки: -2;
конец столбца сетки: -3;
начало строки сетки: -1;
конец строки сетки: -2;
}
.box4 {
начало столбца сетки: -2;
конец столбца сетки: -4;
сетка-начало-строки: -3;
конец строки сетки: -4;
}
Растягивание элемента по сетке
Возможность адресовать начальную и конечную линии сетки полезна, так как затем вы можете растянуть элемент прямо по сетке с помощью:
.item {
сетка-столбец: 1 / -1;
}
Спецификация сетки CSS включает возможность добавления промежутков между дорожками столбцов и строк с помощью свойств column-gap
и row-gap
.Они определяют зазор, который действует так же, как свойство зазор между столбцами
в многоколоночной компоновке.
Примечание: Когда сетка впервые появилась в браузерах, свойства column-gap
, row-gap
и gap
имели префикс grid-
как grid-column-gap
, grid-row -зазор
и сетка-зазор
соответственно.
Браузеры обновляют свои механизмы рендеринга для удаления этого префикса, однако версии с префиксом будут сохранены как псевдонимы, что сделает их безопасными в использовании.
Разрывы появляются только между дорожками сетки, они не добавляют места сверху и снизу, слева или справа от контейнера. Мы можем добавить пробелы в наш предыдущий пример, используя эти свойства в контейнере сетки.
Один
Два
Три
Четыре
.box1 {
сетка-столбец: 1;
сетка-ряд: 1/4;
}
.box2 {
сетка-столбец: 3;
сетка-ряд: 1/3;
}
.box3 {
сетка-столбец: 2;
сетка-ряд: 1;
}
.box4 {
сетка-столбец: 2/4;
сетка-ряд: 3;
}
.wrapper {
дисплей: сетка;
сетка-шаблон-столбцы: повторить (3, 1fr);
сетка-шаблон-строки: повтор (3, 100 пикселей);
колонка-пробел: 20 пикселей;
промежуток между строками: 1em;
}
Сокращение промежутка
Два свойства также могут быть выражены в сокращении промежуток
. Если вы укажете только одно значение для промежутка
, оно будет применяться как к промежуткам между столбцами, так и строками. Если вы задаете два значения, первое используется для разрыва между строками
, а второе - для разрыва между столбцами
.
.wrapper {
дисплей: сетка;
сетка-шаблон-столбцы: повторить (3, 1fr);
сетка-шаблон-строки: повтор (3, 100 пикселей);
пробел: 1em 20px;
}
С точки зрения позиционирования элементов по линиям, зазор действует так, как если бы линия увеличилась по ширине. Все, что начинается с этой строки, начинается после пробела, и вы не можете устранить пробел или поместить что-либо в него. Если вам нужны желоба, которые больше похожи на обычные дорожки, вы, конечно, можете вместо этого определить дорожку для этой цели.
В дополнение к указанию начальной и конечной линий по номеру, вы можете указать начальную линию, а затем количество треков, которые вы хотите охватить областью.
Один
Два
Три
Четыре
.box1 {
сетка-столбец: 1;
сетка-ряд: 1 / пролет 3;
}
.box2 {
сетка-столбец: 3;
сетка-ряд: 1 / пролет 2;
}
.box3 {
сетка-столбец: 2;
сетка-ряд: 1;
}
.box4 {
сетка-столбец: 2 / пролет 2;
сетка-ряд: 3;
}
Вы также можете использовать ключевое слово span
в значении grid-row-start
/ grid-row-end
и grid-column-start / grid-column-end
.В следующих двух примерах будет создана одна и та же область сетки. В первом мы устанавливаем начальную строку строки, затем в конечной строке мы объясняем, что мы хотим охватить 3 строки. Область начинается с строки 1 и охватывает 3 строки до строки 4.
.box1 {
начало столбца сетки: 1;
сетка-начало-строки: 1;
конец ряда сетки: пролет 3;
}
Во втором примере мы указываем конечную строку строки, на которой должен заканчиваться элемент, а затем устанавливаем начальную строку как span 3
. Это означает, что элемент должен будет тянуться вверх от указанной строки строки.Область начинается с строки 4 и охватывает 3 строки до строки 1.
.box1 {
начало столбца сетки: 1;
сетка-начало-ряд: пролет 3;
конец ряда сетки: 4;
}
Чтобы познакомиться с линейным позиционированием в сетке, попробуйте создать несколько общих макетов, разместив элементы на сетках с различным количеством столбцов.