如何避免CSS浮动的包装[英] How to avoid wrapping in CSS float

问题描述

我有一个并排2列的页面(由float:左定义).

我的问题是，当我将浏览器缩放为较小时，右列将掉落在左列下方.

如何避免这种情况?无论屏幕尺寸如何

谢谢

推荐答案

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

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

其他推荐答案

另外，如果您希望它们与浏览器调整大小，则需要定义百分比的宽度. 所以:

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

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

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

本文地址：https://www.itbaoku.cn/post/569530.html