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

Question

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

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

这里的问题是DIV s不会水平排列;他们最终落在彼此之下。以前，我在设定宽度上有DIV s（现在我改为min-width）。

我目前如何形成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;

等

在此示例中，1st-colum 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％宽度。这就是divs叠加的原因。第一列占据宽度的100％，除非第二列低于第一列，否则第二列没有空间占据宽度的100％。

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

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

DEMO