Html 如何避免CSS浮动中的换行

我有一个并排两列的页面（由float:left定义）

我的问题是，当我将浏览器缩放到更小的尺寸时，右栏将下降到左栏的下方

我怎样才能避免这种情况？而且无论屏幕大小如何，它们仍然可以并排出现

---

谢谢

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

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

---

或者，如果您希望使用浏览器调整其大小，则需要以百分比为单位定义宽度。 因此：

---

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

谢谢。我不能将父元素设置为自动宽度吗？除非指定宽度，否则块元素的默认值是根据可用空间自动调整宽度。加载页面后，可以使用javascript计算宽度。@oshafran，因为浮动很奇怪。您可以将包装宽度设置为100%并溢出：自动。这将导致包装器随浏览器调整大小并显示滚动条。Untested@Inrbob正确，但可能会导致其他问题。+1表示49%。良好的防杂散像素保护。请注意，百分比和固定度量值（即边距、填充、边框）不能很好地结合在一起。如果你有“游离像素”，你就犯了严重错误。我同意安德鲁的观点。如果需要流体宽度，只需将其设置为“全部流体宽度”，或通过负边距为固定宽度特性添加补偿。总的来说，希望49%的人能做到这一点让我觉得这是一种糟糕的做法，尤其是因为这一比例可能不足以满足所有的决议。最好在可能导致问题的样式中完全明确。当然，我是那种总是将边距/填充/边框重置为0的人，这确实会导致一些开销工作。可能并非每个用例都需要精确的测量。如果填充使您无法使用负边距或（更好）更改框大小模型，则应为50%。这个答案是从2010年开始的—“游离像素”是由一些糟糕的浏览器舍入问题造成的。据我所知，这些问题都已得到解决，因此，对于那些现在正在实施的人来说，是的，使用50%

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

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