Intereting Posts
Запрос доступа к кадру имеет протокол «https», к кадру, к которому обращаются, имеет протокол «http». Протоколы должны соответствовать Есть ли какие-либо события «по замене DOM»? Обнаружение устройства и замена файла CSS – jQuery Переключить активный class в навигационную панель с помощью JQuery Могу ли я использовать минимальную высоту для таблицы, tr или td? отображать данные из базы данных SQL в таблицу php / html css – применение прокладки к коробке со свитком, нижнее заполнение не работает Скрыть элемент div, если размер экрана меньше определенного размера Хотите, чтобы html-форма не выполняла ничего Как удалить контур кнопки в Opera на фокусе Как сделать дочерний div прозрачным? Помогите!? IE9: событие onChange не срабатывает, когда значение изменяется с помощью сценария onkeydown и пользовательских вкладок Автозаполнение форм в webview с помощью javascript (Android) почему не попадает, когда с помощью SELECT сбрасывается форма? Установка Jekyll по умолчанию не имеет каталога _layouts

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

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

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

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

Solutions Collecting From Web of "Разделить Div на 2 столбца с помощью CSS"

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

 

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

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

 
#left content in here
#right content in there

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

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

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

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

 #content::after { display:block; content:""; clear:both; } то и #content::after { display:block; content:""; clear:both; } 

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

 

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

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

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

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

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

 
some stuff
some more stuff

Вы можете увидеть его здесь: http://cssdesk.com/d64uy

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

 #content { width: 500px; height: 500px; } #left, #right { display: inline-block; width: 45%; height: 100%; } 

См. Демонстрацию

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

 #parent { margin: 0; width: 100%; } .left { float: left; width: 60%; } .right { overflow: hidden; width: 40%; } 

На это лучше всего ответить. Вопрос 211383

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

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

 

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; } /* */ 

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

  1. Сделайте размер шрифта равным нулю в родительском DIV.
  2. Установите ширину% для каждого дочернего DIV.

     #content { font-size: 0; } #content > div { font-size: 16px; width: 50%; } 

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

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

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

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

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

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

 .two-column-div { column-count: 2; } 

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

Я знаю, что этот пост старый, но если кто-то из вас все еще ищет более простое решение.

 #container .left, #container .right { display: inline-block; } #container .left { width: 20%; float: left; } #container .right { width: 80%; float: right; }