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

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

Здравствуйте! Подскажите пожалуйста, как мне разделить блок на две части, но при этом, чтобы они были в общем блоке? 1-я часть картика + описание черным текстом, а 2-я часть должна быть только с описанием зеленого текста.

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

Извините за то, что криво объяснил, по другому не знаю как объяснить =( Я приложил скриншот на котором нарисовал разделение. Но мне нужно чтобы самой полоски разделения в блоке не было видно. Нужно чтобы зеленый текст был за черной полосой , но при этом этой полосы не было видно — как-то так

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

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

Вот как это выглядит:

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

Просто нужно сделать 2 блока, а внутри правого уже разместить нужное количество элементов, ему также можно задать display: flex если требуется горизонтальное расположение или какое либо выравнивание.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

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

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

Спасибо за любую помощь!

13 ответов

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

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

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

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

overflow: hidden заставит элемент расти, чтобы вписаться в плавающие элементы.

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

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

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

но без добавления элементов. :: after называется псевдо-элементом. Единственная причина, по которой это лучше, чем добавить overflow:hidden; to #content заключается в том, что вы можете иметь абсолютное переполнение дочерних элементов и все еще быть видимым. Также это позволит коробка-тени все еще были видны.

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

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

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

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

на это лучше всего ответить здесь вопрос 211383

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

поплавки не влияют на поток. То, что я склонен делать, это добавить

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

Читать:

Как копировать текст из пдф в ворд без сбития текста

обман с комментариями для кросс-браузерной совместимости.

сделать размер шрифта равным нулю в Родительском DIV.

установить ширину % для каждого из дочерних DIVs.

*в Safari вам может потребоваться установить 49%, чтобы он работал.

разделить деление на два столбца очень легко, просто укажите ширину вашего столбца лучше, если вы поместите это (например, ширина:50%) и установите float:left для левого столбца и float:right для правого столбца.

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

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

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

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

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

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

flex-direction: row Направление row (строка, ряд) для локали LTR

flex-direction-row: reverse Направление row-reverse (реверсивная строка) для локали LTR

flex-direction: column Направление column (столбец, колонка)

flex-direction-column: reverse Направление column-reverse (реверсивный столбец)

Свойство justify-content

flex-start (значение по умолчанию) — flex-элементы прижимаются к началу главной оси.
flex-end — flex-элементы прижимаются к концу главной оси.
center — flex-элементы центрируются по главной оси.
space-between — первый flex-элемент находится в начале главной оси, последний flex-элемент — в ее конце, а все остальные flex-элементы равномерно распределяются в пределах оставшегося пространства.
space-around — все flex-элементы равномерно распределяются на главной оси, при этом свободное пространство поровну делится между ними.

justify-content: flex-start

justify-content: flex-end

justify-content: center

justify-content: space-between

justify-content: space-around

Свойство align-items

stretch (значение по умолчанию) — flex-элементы растягиваются вдоль поперечной оси (если при этом указаны свойства min-width / max-width , они принимаются во внимание).
flex-start — flex-элементы прижимаются к началу поперечной оси.
flex-end — flex-элементы прижимаются к концу поперечной оси.
center — flex-элементы центрируются по поперечной оси.
baseline — flex-элементы выравниваются по своим базовым линиям.

align-items: stretch

align-items: flex-start

align-items: flex-end

align-items: center

align-items: baseline

Свойство flex-wrap

nowrap (значение по умолчанию) — flex-элементы размещаются в одной линии, слева направо (либо справа налево для локации RTL).
wrap — flex-элементы выстраиваются горизонтально в несколько рядов (при условии, что они не помещаются в один ряд). Направление элементов — слева направо (или справа налево для RTL).
wrap-reverse — принцип действия идентичен предыдущему свойству, с той лишь разницей, что расположение flex-элементов происходит в реверсном порядке.

flex-wrap: nowrap

flex-wrap: wrap

flex-wrap: wrap-reverse

Свойство flex-flow

Свойство align-content

stretch (значение по умолчанию) — ряд flex-элементов растягивается по вертикали, пока не упрется в следующий ряд (если при этом указаны свойства min-width / max-width , они принимаются во внимание).
flex-start — ряды flex-элементов прижимаются к началу flex-контейнера.
flex-end — ряды flex-элементов прижимаются к концу flex-контейнера.
center — ряды flex-элементов вертикально центрируются во flex-контейнере.
space-between — первый ряд flex-элементов находится в начале flex-контейнера, последний ряд flex-элементов — в конце, а все остальные ряды равномерно распределяются в пределах оставшегося пространства.
space-around — все ряды flex-элементов равномерно распределяются в вертикальном пространстве flex-контейнера, при этом свободное пространство поровну делится между ними.

align-content: stretch