css - 如何设置动态宽度 DIV

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 将占视口(viewport)的百分比，比如 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 总是等宽的，并且彼此之间有一定的间隔。这类似于表格布局，但我宁愿尽可能不使用表格。我尝试了各种技术，如 float 和显示内联 div，但无济于事。它们似乎永远无法恰到好处地对齐。

Answer 1

表格单元格可以自动拉伸(stretch)。 div 不太可能，因此您必须手动为每一列指定适当的宽度。例如:

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