CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法

本文转载自查看原文 2019-10-31 15:42 807 CSS

我们在设置浮动元素时往往会出现这样的现象，由于两个浮动元素宽度之和大于父元素的宽度而导致第二个浮动元素被挤到下面，就像下面这样。

<body>
    <div class="parent">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

.parent{
    background-color: skyblue;
    height: 120px;
}
.left{
    width:500px;
    height: 100px;
    float: left;
    background-color: plum;
}
.right{
    height: 80px;
    width: 700px;
    float: right;
    background-color:yellow;
}

当页面足够宽时，两个浮动元素还可以共存在一行，一旦页面缩小，就会出现此现象。究其原因是因为父元素parent未设置宽度从而继承了body的宽度，即width:100%，页面呈现多宽，父元素就多宽。

我这里的解决方法是设置父元素parent的width属性大于两个子元素的宽度之和，这样浮动的子元素就只能一直在父元素中存在。

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 CSS学习笔记--导航栏元素由于页面缩小而被挤到下一行的解决方法 CSS浏览器兼容性与解决方法浏览器缩小后页面变形浏览器缩放，会导致布局打乱，解决方法？/一缩小网页布局就打乱了怎么办？ css+div定位，缩小浏览器的窗口，页面就乱了 jmeter录制https请求时，浏览器每一个请求都跳不安全访问页面的解决方法 jsp页面在移动端自适应，chrome浏览器没问题，可是safari浏览器有问题的解决方法 iOS Safari浏览器上overflow: scroll元素无法滑动bug解决方法整理 Chrome浏览器不能正确加载更新后JavaScript和Css文件原因及解决方法谷歌浏览器打开页面出现(任何网页包括设置)崩溃解决方法。