解决浏览器缩小布局变乱问题

OECOM

发布于 2020-07-01 17:46:50

2.8K0

发布于 2020-07-01 17:46:50

文章被收录于专栏：OECOM

在编写pc端网页的时候我遇到了一个问题，就是我采用float浮动布局时，当浏览器缩小，发现布局乱了。通过仔细测试，我找到了解决的办法。

float浮动布局变乱的原因是由于浏览器屏幕缩小，导致宽度变化，使之在宽度上无法装下浮动的元素，这些元素会自动向下浮动。知道了这个原理我们就可以想出解决办法了。

先说第一种办法，就是将最外层的div层的宽度设死，设置为浏览器最大的宽度，这样在浏览器屏幕缩小的时候，div的宽度不会变化，也就不会产生向下浮动的问题。看一下示例代码吧

<style>
#div1{
 width:1400px;
}
#div2{
 float:left;
 width:500px;
}
#div3{
 float:left;
 width:800px;
}
</style>
<div id="div1">
 <div id="div2"></div>
<div id="div3"></div>
</<div>

但是有一个问题就出现了，好像并不是所有的pc的宽度都一致，所以就产生了在一些屏幕小的电脑上在浏览器最大化的时候也会产生横向滚动条，这很影响浏览性。所以就产生了第二种方法。就是获取屏幕的宽度，将最外层的div宽度设置为屏幕的宽度，内层div的宽度采用百分比的形式即可。看一下示例代码

<style>

#div2{
 float:left;
 width:54%;
}
#div3{
 float:left;
 width:29%;
}
</style>
<div id="div1">
 <div id="div2"></div>
<div id="div3"></div>
</<div>
<script>
var WIDTH_MAX = window.screen.width-20;//去除浏览器的边界
$("#div2").css("width",WIDTH_MAX+"px");
</script>

问题解决啦。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2015-09-23，如有侵权请联系 cloudcommunity@tencent.com 删除

布局