如何设置动态宽度divs

Question

这是我的场景。我有一个容器div，其中包含（n）子元素。对于这种情况，可以说容器div内有2个divs：

<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内联，无济于事。他们似乎永远无法对齐。

Answer 1

表单元可以自动拉伸。不可能 div, ，因此您必须手动指定每列的适当宽度。例如：

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

Answer 2

与

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

显然（调整宽度以说明您的利润/填充物。建议您使用利润/填充的百分比，因此它们总计不到100％，请参见：http://ejohn.org/blog/sub-pixel-problems-in-css/)

Answer 3

我首选的解决方案

使用相对于外部容器的定位：

#container, #container > div  
{
    position: relative;
}

#col1  
{
     left: 2%; /* your margin */
}

#col2  
{
     right: 2%;
}

#container > div 
{
     width: 47%;
}

请注意，您在中间留下大约2％的2％。这 #col1 和 #col2 现在应该对齐。

其他解决方案

使用CSS3：使用 column-count: 2 和第一次突破列 div.

如果您真的想漂浮，只做 #col1 { float: left; width: 50%; }

Answer 4

#container{
overflow: hidden
} 

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

Answer 5

也许使用 display: table; 有助于？ http://jsfiddle.net/g4dgz/119/