如何避免CSS浮动包装

Question

我有一个并排2列的页面（由float：left定义）。

我的问题是，当我将浏览器缩小到更小时，右列将被删除到左列下方。

我该如何避免这种情况？无论屏幕大小如何，它们仍然是并排的。

谢谢

Answer 1

或者，如果您希望它们使用浏览器调整大小，则需要以百分比定义宽度。 所以：

.div1 {
float:left;
width:49%;
background:red;
}

.div2 {
float:left;
width:49%;
background:orange;
}

有些人会在这里使用50％，我倾向于

Answer 2

使父容器具有固定宽度或将溢出设置为auto。例如，如果您的两列是200px宽

<div style="width: 400px; overflow: auto;">
  <div style="float: left; width: 200px;"></div>
  <div style="float: left; width: 200px;"></div>
</div>