Question

这是我的情景。我有一个容器div，里面有（n）个子元素。对于这个例子，我们可以说容器div中有2个div：

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

容器div将是视口的百分比，比如说80％。现在，我正在寻找的是这两个内部div（col1＆amp; 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

使用

使col1和col2跨度（不是div）

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％。 #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/

如何设置动态宽度DIV

5 个答案:

我的首选解决方案

其他解决方案