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

Question

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

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

这里的问题是DIVs 不是水平排列的；他们最终在彼此下方。以前，我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;

等等

在此示例中，第 1 列 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 的最小宽度为 600 像素。

演示