Разделение Div на 2 столбца с использованием CSS
Я пытался разделить div на два столбца с помощью CSS, но мне не удалось получить это работает еще. Моя основная структура выглядит следующим образом:
<div id="content">
<div id="left">
<div id="object1"></div>
<div id="object2"></div>
</div>
<div id="right">
<div id="object3"></div>
<div id="object4"></div>
</div>
</div>
Если я пытаюсь переместить правый и левый div в их соответствующие позиции (правый и левый), кажется, что игнорируется фоновый цвет содержимого div. И другой код, который я пробовал с разных сайтов, похоже, не может перевести на мою структуру.
Спасибо за любую помощь!
4 ответа
Когда вы плаваете этими двумя div, содержимое div падает на нулевую высоту. Просто добавьте
<br style="clear:both;"/>
после #right div, но внутри content div. Это заставит Content Div окружить два внутренних плавающих дива.
Другой способ сделать это - добавить overflow:hidden; к родительскому элементу плавающих элементов.
overflow:hidden заставит элемент вырасти и поместиться в плавающие элементы.
Таким образом, все это можно сделать в css, а не добавлять еще один html элемент.
.Поплавки не влияют на поток. Что я обычно делаю, так это добавляю
<p class="extro" style="clear: both">possibly some content</p>
в конце "оберточного 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;
}
/* */
Обман с комментариями заключается в межбраузерной совместимости.
.По какой-то причине мне никогда не нравились подходы к очистке, я полагаюсь на числа с плавающей запятой и процентную ширину для таких вещей.
Вот кое-что, что работает в простых случаях:
#content {
overflow:auto;
width: 600px;
background: gray;
}
#left, #right {
width: 40%;
margin:5px;
padding: 1em;
background: white;
}
#left { float:left; }
#right { float:right; }
Если вы добавите какой-то контент, вы увидите, что он работает:
<div id="content">
<div id="left">
<div id="object1">some stuff</div>
<div id="object2">some more stuff</div>
</div>
<div id="right">
<div id="object3">unas cosas</div>
<div id="object4">mas cosas para ti</div>
</div>
</div>
Вы можете увидеть это здесь: http://cssdesk.com/d64uy