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

Question

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

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

这里的问题是DIVs不是水平排列的; 他们最终落在彼此之下.以前,我DIV的设定宽度(我现在更改为最小宽度).

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

容器:

width: 830px;
float: left;

1 - 科拉姆:

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,左浮动,divs占用相同的100%宽度,除非它们堆叠.这就是divs叠加的原因.第一列占据宽度的100%,除非第二列低于第一列,否则第二列也没有空间占据宽度的100%.

如果您希望列实际上是列,则需要它们的宽度为33.3%.(100%的三分之一)

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