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

本文是小编为大家收集整理的关于如何避免CSS浮动的包装的处理方法,想解了如何避免CSS浮动的包装的问题怎么解决?如何避免CSS浮动的包装问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

我有一个并排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