Как установить DIV с динамической шириной
Вопрос
Вот мой сценарий.У меня есть контейнер div, внутри которого есть (n) дочерние элементы.Для этого примера предположим, что внутри контейнера есть 2 div:
<div id="container">
<div id="col1">
Stuff in col1
</div>
<div id="col2">
Stuff in col2
</div>
</div>
Контейнерный div будет составлять процент от области просмотра, скажем, 80%.Теперь я хочу, чтобы эти два внутренних элемента div (col1 и col2) были встроенными друг в друга и занимали одинаковое количество места.Таким образом, результат должен выглядеть примерно так:
+-------------- container -------------+
| +---- col1 ----+ +---- col2 ----+ |
| | stuff in | | stuff in | |
| | col1 | | col2 | |
| +--------------+ +--------------+ |
+--------------------------------------+
Или, если ширина контейнера изменится, это должно привести к чему-то вроде этого:
+------------------------------ container -----------------------------+
| +------------ col1 ------------+ +------------ col2 ------------+ |
| | stuff in col1 | | stuff in col2 | |
| | stuff in col1 | | stuff in col2 | |
| +------------------------------+ +------------------------------+ |
+----------------------------------------------------------------------+
Внутренние элементы div всегда имеют одинаковую ширину и немного отделены друг от друга.Это похоже на макет таблицы, но я бы предпочел не использовать таблицы, если это возможно.Я пробовал различные методы, такие как плавание и отображение встроенных элементов div, но безрезультатно.Кажется, что они никогда не могут выровняться правильно.
Решение
Ячейки таблицы могут растягиваться автоматически.Это не совсем возможно с div
, поэтому вам придется вручную указать соответствующую ширину для каждого столбца.Например:
#col1, #col2 {
float: left;
width: 50%;
}
Другие советы
сделайте интервалы col1 и col2 (не div) с помощью
vertical-align:top
display:inline-block
width:50%
очевидно (отрегулируйте ширину, чтобы учесть ваши поля/отступы.и рекомендовал использовать проценты для полей/отступов, чтобы в сумме они составляли чуть менее 100%, см.:http://ejohn.org/blog/sub-pixel-problems-in-css/)
Мое предпочтительное решение
Используйте позиционирование относительно внешнего контейнера:
#container, #container > div
{
position: relative;
}
#col1
{
left: 2%; /* your margin */
}
#col2
{
right: 2%;
}
#container > div
{
width: 47%;
}
Обратите внимание, что вы оставляете примерно те же 2% посередине.А #col1
и #col2
теперь должно быть выровнено.
Другие решения
С CSS3:использовать column-count: 2
и разбить столбец после первого div
.
Если вам действительно хочется плыть, делайте только #col1 { float: left; width: 50%; }
#container{
overflow: hidden
}
#col1, #col2 {
float: left;
width: 50%;
}
Возможно, использование display: table;
помог бы? http://jsfiddle.net/g4dGz/119/