Как разделить блок на две части css

Как разбить блок на две независимые части

Я хочу разбить bar-line на две части (1 и 2 как на прикрепленном рисунке) и работать с ними уже отдельно как с flex элементами
HTML:

 
 
  
some text
 
some text
 
 
 

.top-bar < position: fixed; width: 100%; height: 4%; background-image: url("Rectangle.png"); padding : 1%; >.top-bar-сlone < position: static; visibility: hidden; width: 100%; height: 6%; >.bar-line < display: flex; flex-direction: row; justify-content: space-between; height: 100%; >.bar-line-right < height: 100%; justify-content: flex; >.bar-line-left

Вот как это выглядит: А вот как хотелось бы, где внутри 1 лежит bar-line-left , а внутри 2 bar-line-right

Отслеживать

задан 19 сен 2019 в 16:26

722 2 2 золотых знака 8 8 серебряных знаков 22 22 бронзовых знака

Как разбить блок на две независимые части

Я хочу разбить bar-line на две части (1 и 2 как на прикрепленном рисунке) и работать с ними уже отдельно как с flex элементами
HTML:

 
 
  
some text
 
some text
 
 
 

.top-bar < position: fixed; width: 100%; height: 4%; background-image: url("Rectangle.png"); padding : 1%; >.top-bar-сlone < position: static; visibility: hidden; width: 100%; height: 6%; >.bar-line < display: flex; flex-direction: row; justify-content: space-between; height: 100%; >.bar-line-right < height: 100%; justify-content: flex; >.bar-line-left

Вот как это выглядит: А вот как хотелось бы, где внутри 1 лежит bar-line-left , а внутри 2 bar-line-right

Отслеживать

задан 19 сен 2019 в 16:26

722 2 2 золотых знака 8 8 серебряных знаков 22 22 бронзовых знака

Разделить деление на 2 столбца с помощью CSS

Я пытаюсь разделить div на два столбца с помощью CSS, но мне пока не удалось его запустить. Моя основная структура выглядит следующим образом:

Если я попытаюсь поплавать вправо и влево divs в их соответствующие позиции (вправо и влево), он, кажется, игнорирует фоновый цвет содержимого div. И другой код, который я пробовал с разных сайтов, похоже, не может перевести на мою структуру. Спасибо за любую помощь!

PF1 26 дек. 2009, в 22:33
Поделиться
Есть так много решений, вы можете увидеть это: stackoverflow.com/questions/211383/…
enmaai 29 апр. 2014, в 02:38
Поделиться:

12 ответов

Лучший ответ

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

после #right div, но внутри содержимого div. Это заставит содержимое div окружать два внутренних плавающих div.

Rob Van Dam 26 дек. 2009, в 22:27
Поделиться
Спасибо Роб, это прекрасно работает!
PF1 26 дек. 2009, в 20:47
+1 Наилучшее решение найдено и работает как положено! Спасибо!
Will Marcouiller 03 апр. 2013, в 00:52

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

Jbird 30 авг. 2013, в 00:25
Показать ещё 1 комментарий

Это хорошо для меня. Я разделил экран на две половины: 20% и 80%:

 
#left content in here
 
#right content in there
 

Navish 30 июнь 2011, в 11:19
Поделиться
Если это все, что вы делаете, родитель этих элементов не будет иметь высоты.
tybro0103 19 авг. 2014, в 17:41
Легко и эффективно. Спасибо!
Alexis Gamarra 11 фев. 2015, в 16:47

Другой способ сделать это — добавить overflow:hidden; в родительский элемент плавающих элементов.

overflow: hidden заставит элемент расти в поплавках.

Таким образом, все это можно сделать в css вместо добавления другого элемента html.

tybro0103 26 дек. 2009, в 22:41
Поделиться

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

tybro0103 16 май 2012, в 13:59
еще одно замечание: overflow:auto; иногда может быть лучшим вариантом
tybro0103 14 апр. 2013, в 04:17

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

Jbird 30 авг. 2013, в 00:21
Показать ещё 1 комментарий

Самый гибкий способ сделать это:

#content::after

Это действует точно так же, как добавление элемента к #content:

но без добавления элемента. after называется псевдоэлементом. Единственная причина, по которой это лучше, чем добавление overflow:hidden; в #content, заключается в том, что вы можете переполнять абсолютные позиционные дочерние элементы и оставаться видимыми. Кроме того, он будет оставаться видимым. [/P >

tybro0103 30 март 2012, в 02:32
Поделиться

Также отличное решение, но стоит упомянуть здесь, что это не работает в IE8. Мне действительно больно это говорить, и я извиняюсь за то, что я «тот парень».

Jbird 30 авг. 2013, в 00:22

@Jbird try #content:after (только одно двоеточие вместо двух) . Если я правильно помню, правильнее использовать два двоеточия для псевдоэлементов, но старые IE распознают его только при наличии такового. . или что-то в этом роде — прошло достаточно времени с тех пор, как я занялся этим вопросом.

tybro0103 30 авг. 2013, в 04:11

По какой-то причине мне никогда не нравились подходы к очистке, я полагаюсь на float и процентную ширину для таких вещей.

Здесь что-то работает в простых случаях:

#content < overflow:auto; width: 600px; background: gray; >#left, #right < width: 40%; margin:5px; padding: 1em; background: white; >#left < float:left; >#right

Если вы разместите контент, вы увидите, что он работает:

 
 
some stuff
 
some more stuff
 
 
unas cosas
 
mas cosas para ti
 
 
 

user18015 09 авг. 2010, в 18:37
Поделиться

Сделайте дочерние divs inline-block , и они будут располагаться бок о бок:

#content < width: 500px; height: 500px; >#left, #right

Oriol 11 май 2015, в 23:47
Поделиться

Я также предпочитаю этот метод над плавающим. Иногда нужно установить: vertical-align: top; (или снизу и т. д.) на левом и правом элементах, если они не имеют одинаковый размер.

james 21 апр. 2016, в 22:30

Лучший способ разделить div по вертикали —

#parent < margin: 0; width: 100%; >.left < float: left; width: 60%; >.right

UberNeo 30 авг. 2013, в 00:34
Поделиться

Здесь лучше всего ответить Вопрос 211383

В наши дни любой уважающий себя человек должен использовать установленный метод «микроочистки» для очистки плавающих полей.

Jbird 30 авг. 2013, в 01:57
Поделиться

Поплавки не влияют на поток. Я стараюсь добавить

possibly some content
 

в конце «wrapping div» (в данном случае контента). Я могу обосновать это на семантической основе, сказав, что такой абзац может понадобиться. Другой подход заключается в использовании clearfix CSS:

#content:after < content: "."; display: block; height: 0; clear: both; visibility: hidden; >#content < display: inline-block; >/* \*/ * html #content < height: 1%; >#content < display: block; >/* */ 

Обман с комментариями связан с совместимостью между браузерами.

Gazzer 27 дек. 2009, в 06:53
Поделиться

Ни один из ответов не отвечает на исходный вопрос.

Вопрос заключается в том, как разделить div на 2 столбца с помощью css.

Все приведенные выше ответы фактически вставляют 2 divs в один div, чтобы имитировать 2 столбца. Это плохая идея, потому что вы не сможете передавать содержимое в 2 столбца любым динамическим способом.

Итак, вместо вышесказанного, используйте один div, который содержит 2 столбца, используя CSS следующим образом:

.two-column-div

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

Выравнивание элементов во Flex контейнере

Одной из причин быстрого роста популярности flexbox среди веб-разработчиков было то, что впервые были предоставлены адекватные возможности выравнивания. Он предоставил адекватное вертикальное выравнивание, и стало возможным, наконец, легко поместить элемент в центр по вертикали. В этом руководстве детально рассматривается, как выравнивание и распределение работают во Flexbox.

Для центрирования элемента по перекрёстной оси (в данном случае — вертикальной) используется свойство align-items . Для центрирования элемента по главной оси (в данном случае — горизонтально), используется свойство justify-content .

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

Свойства управления выравниванием

В этом руководстве рассматриваются следующие свойства:

• justify-content — управляет выравниванием элементов по главной оси.
• align-items — управляет выравниванием элементов по перекрёстной оси.
• align-self — управляет выравниванием конкретного flex элемента по перекрёстной оси.
• align-content — описывается в спецификации как «упаковка flex строк»; управляет промежутками между flex строками по перекрёстной оси.

Также будет рассмотрены авто-отступы для выравнивания элементов во flexbox.

Примечание: Свойства выравнивания во Flexbox помещены в отдельную спецификацию — CSS Box Alignment Level 3. Ожидается, что данная спецификация в конце концов заменит свойства, определённые во Flexbox Level One.

Перекрёстная ось

Свойства align-items и align-self управляют выравниванием flex элементов по перекрёстной оси: вертикальной для flex-direction установленным в row, и горизонтальной для flex-direction установленным в column .

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

Все элементы становятся одной высоты, т.к. по умолчанию свойство align-items имеет значение stretch .

Другие возможные значения свойства:

• align-items: flex-start
• align-items: flex-end
• align-items: center
• align-items: stretch
• align-items: baseline

В примере ниже значение свойств align-items установлено в stretch . Попробуйте другие значения для понимания их действия.

Выравнивание одного элемента при помощи align-self

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

В следующем примере, у flex контейнера установлено align-items: flex-start , означающее, что все элементы будут выравнены по началу перекрёстной оси. У первого элемента с помощью селектора first-child установлено align-self: stretch ; у следующего элемента с классом selected установлено align-self: center . Можно изменять значение align-items на контейнере или align-self на элементе для изучения их работы.8н

Изменение основной оси

До сего момента мы изучали поведение при flex-direction установленном в row , в языке, использующем написание сверху вниз. Это означает, что основная ось идёт горизонтально, а выравнивание по перекрёстной оси сдвигает элементы вверх или вниз.

Если изменить flex-direction на column, align-items и align-self будут сдвигать элементы влево или вправо.

Можно попробовать пример ниже, где установлено flex-direction: column .

Выравнивание содержимого по перекрёстной оси — свойство align-content

До сих пор мы выравнивали элементы внутри flex-контейнера. Если содержимое вашего flex контейнера переносится на несколько строк, используйте свойство align-content для управления свободным пространством между строками. В спецификации это описано как упаковка flex-строк.

Чтобы свойство align-content работало, необходимо, чтобы в flex-контейнере было больше места, что требуется для отображения всего содержимого. Оно применяется ко всем элементам как группе, и управляет распределением свободного места и положением всей группы элементов внутри контейнера.

Свойство align-content принимает следующие значения:

• align-content: flex-start
• align-content: flex-end
• align-content: center
• align-content: space-between
• align-content: space-around
• align-content: stretch
• align-content: space-evenly (не описано в спецификации Flexbox)

В примере ниже flex контейнер имеет высоту 400 пикселей — больше, чем необходимо для отображения всех элементов. Значение align-content установлено в space-between , означающее, что свободное пространство разделено между строками, расположенными вплотную к началу и концу контейнера по перекрёстной оси.

Попробуйте другие значения align-content для понимания принципа их работы.

Также можно сменить значение flex-direction на column и увидеть, как наше свойство работает в режиме колонок. Как и ранее, что увидеть работу свойства, у контейнера должно быть больше свободного места, чем требуется содержимому.

Примечание: значение space-evenly не определено в спецификации flexbox и добавлено позже в спецификацию Box Alignment. Поддержка браузерами этого значение не так широка, как значений определённым в спецификации flexbox.

В документации по justify-content на MDN приведено больше деталей о всех значениях и поддержке браузерами.

Выравнивание содержимого по главной оси

Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — justify-content . Это обусловлено тем, что с элементами на главной оси мы работаем только как с группой. Используя свойство justify-content , мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.

В нашем первом примере с использованием свойства display: flex , применённым к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство justify-content имеет начальное значение flex-start . Все свободное место располагается в конце контейнера.

Свойство justify-content может принимать те же самые значения, что и align-content .

• justify-content: flex-start
• justify-content: flex-end
• justify-content: center
• justify-content: space-between
• justify-content: space-around
• justify-content: stretch
• justify-content: space-evenly (не определено в спецификации Flexbox)

В примере ниже, свойству justify-content задано значение space-between . Все доступное пространство распределяется между элементами после их позиционирования в контейнере. Первый и последний элементы занимают положения в начале и в конце контейнера соответственно.

Если свойство flex-direction имеет значение column , то свойство justify-content распределит доступное пространство в контейнере между элементами.

Выравнивание и режим записи

Необходимо помнить, что при использовании свойств flex-start и flex-end элементы позиционируются в режиме записи. Если свойству justify-content задано значение start и стоит режим записи left-to-right (слева-направо), как в английском, то элементы выравниваются, начиная с левой стороны контейнера.

Однако, если задан режим записи right-to-left (справа-налево), как в арабском языке, то элементы будут выстраиваться с правой стороны контейнера.

В примере ниже свойству property задано значение rtl , которое изменяет порядок наших элементов. Вы можете удалить это свойство или изменить значение свойства justify-content , чтобы увидеть, как работает flexbox, когда отображение элементов начинается справа.

Выравнивание и гибкое-направление

Начальное положение элементов поменяется, если вы измените значение свойства flex-direction — например установите row-reverse вместо row .

В следующем примере заданы следующие свойства: flex-direction: row-reverse и justify-content: flex-end . В языках с параметром записи ltr все элементы будут отображаться с левой стороны. Попробуйте изменить свойство flex-direction: row-reverse на flex-direction: row . Вы увидите, что теперь элементы отображаются реверсивно.

Может показаться немного запутанным, но главное правило, которое необходимо запомнить – до тех пор, пока вы не измените свойство flex-direction , элементы контейнера выстраиваются в режиме записи вашего языка ( ltr или rtl ).

Вы можете сделать отображение элементов контейнера блочным, задав свойству flex-direction значение column . Свойство flex-start будет отображать элементы в столбец сверху вниз. Таким образом, первый элемент будет первым параграфом.

Если вы зададите свойству flex-direction реверсивное значение, то элементы будут позиционироваться в обратном порядке. Так, свойство flex-start будет брать начало в конце контейнера. Первый элемент будет находится в конце строки, если задано строчное отображение элементов или в конце параграфа, если задано блочное отображение.

Использование авто отступов для выравнивания по главной оси

Так как элементы, расположенные на главной оси, обрабатываются как группа, свойства justify-items или justify-self становятся недоступными. Тем не менее, существует способ отделить конкретный элемент или группу элементов от остальных, используя внешний отступ margin со значением auto .

Распространённый пример — панель навигации, в которой отдельные важные элементы выровнены по правому краю, а основная группа элементов — по левому.

На первый взгляд может показаться, что этот пример использования свойства justify-self . Однако, рассмотрим следующий ниже пример. Имеется три элемента с одной стороны и два — с другой. Если бы мы могли использовать justify-self на элементе d, это также изменило бы выравнивание следующего элемента — e, что может противоречить первоначальному замыслу.

Вместо этого мы можем выбрать четвёртый элемент (d) и отделить его от первых трёх, задав ему значение auto для margin-left . Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом работает margin-right . Оба свойства со значениями auto отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.

В интерактивном примере ниже у нас имеется простой ряд из флекс-элементов и класс push с заданным margin-left: auto . Вы можете, например, попробовать удалить это значение или добавить класс другому элементу, чтобы увидеть, как работает этот метод.

Будущие функции выравнивания для Flexbox

В начале этой статьи объясняется, что свойства выравнивания, которые в настоящее время содержатся в спецификации Flexbox Level 1, также включены в спецификацию Box Alignment Level 3, которая в дальнейшем может расширить эти свойства и значения. Мы уже видели, как это произошло с введением значения space-evenly для свойств align-content и justify-content .

Выравнивание во Flexbox также включает в себя другие методы создания пространства между элементами, такие как column-gap and row-gap , как показано в макете CSS Grid Layout. Включение этих свойств в Box Alignment означает, что в будущем мы также сможем использовать column-gap и row-gap во Flexbox разметке. Это означает, что вам не нужно будет использовать отступы, чтобы создать пространство между элементами.

Моё предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье Box Alignment in Grid Layout, а также рассмотреть как выравнивание работает в этих спецификациях в статье Box Alignment Cheatsheet.

• Выравнивание Коробки
• Выравнивание Коробки в Flexbox (Гибкая Коробка)
• Выравнивание Коробки в Grid Layout (Макет Сетки)