固定宽度容器中的浮动 DIV 以继续水平对齐

Question

我有一个固定宽度的960px容器，我正在调整我的设计以适应各种屏幕分辨率。在容器中，我有一些使用宽度%和最小宽度的浮动DIV，例如：

width:80%;
min-width:200px;

这里的问题是DIV不是水平排列的;它们最终在彼此下方。以前，我的DIV s 在设定的宽度上（我现在更改为最小宽度）。

我目前如何形成 DIV 的一个例子：

容器：

width: 830px;
float: left;

第一列：

width:100%;
min-width: 200px;
float: left;

第二列：

width:100%;
min-width: 200px;
float: left;

第三列：

width:100%;
min-width: 200px;
float: left;

等。

在此示例中，第一列 DIV 覆盖容器的整个宽度，并将其他 DIV 向下推。

下面的 HTML 示例：

<div id="container">
   <div id="1stcolum">Hello world</div>
   <div id="2ndcolum">Hello world</div>
   <div id="3rdcolum">Hello world</div>
</div>

如您所见，HTML 中也没有什么花哨的。

Answer 1

基于您发布的CSS和HTML。

你不能有 3 个，左浮动，div 都占据相同的 100% 宽度，除非它们堆叠。这就是div 堆叠的原因。第一列占用 100% 的宽度，除非第二列低于第一列，否则第二列没有空间也占用 100% 的宽度。

如果希望列实际上是列，则需要它们的宽度为 33.3%。（100%的三分之一）

而且，如果您希望列的宽度至少为 200 像素，则不需要每列的最小宽度，只需容器div 的最小宽度为 600px。

演示