前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >解决浏览器缩小布局变乱问题

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

作者头像
OECOM
发布2020-07-01 17:46:50
2.8K0
发布2020-07-01 17:46:50
举报
文章被收录于专栏:OECOM

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

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

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

代码语言:javascript
复制
<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的宽度采用百分比的形式即可。看一下示例代码

代码语言:javascript
复制
<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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档