Как установить динамическую ширину DIVs

Question

Вот мой сценарий. У меня есть контейнер div, который имеет (n) дочерние элементы внутри него. Для этого экземпляра предположим, что в контейнере есть 2 div:

<div id="container">
    <div id="col1">
        Stuff in col1
    </div>
    <div id="col2">
        Stuff in col2
    </div>
</div>

Div контейнера будет составлять процент от области просмотра, скажем, 80%. Теперь мне нужно, чтобы эти два внутренних элемента (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 всегда имеют одинаковую ширину и несколько отделены друг от друга. Это похоже на макет таблицы, но я бы не стал использовать таблицы, если это возможно. Я пробовал различные методы, такие как плавающие и отображающие элементы в строке безрезультатно. Кажется, что они никогда не выровняются в правильном направлении.

Answer 1

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

#col1, #col2 {
    float: left;
    width: 50%;
}

Answer 2

Может быть, использование display: table; поможет? http://jsfiddle.net/g4dGz/119/

Answer 3

#container{
overflow: hidden
} 

#col1, #col2 {
    float: left;
    width: 50%;
}

Answer 4

Мое предпочтительное решение

Использовать позиционирование относительно внешнего контейнера:

#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%; }

Answer 5

делает интервалы col1 и col2 (не div) с

vertical-align:top
display:inline-block
width:50%

очевидно (настройте ширину, чтобы учесть ваши поля / отступы. И рекомендовали использовать проценты для полей / отступов, чтобы они составляли чуть менее 100%, см .: http://ejohn.org/blog/sub-pixel-problems-in-css/)