如何避免 CSS 浮动换行

Question

我有一个页面，有 2 列并排（均由 float: left 定义）。

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

我怎样才能避免这种情况？并且无论屏幕尺寸如何，仍然使它们并排。

谢谢

Answer 1

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

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

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

有些人会在这里使用 50%，我倾向于不这样做

Answer 2

将父容器设置为固定宽度或将溢出设置为自动。例如，如果您的两列宽 200px

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