专栏首页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>

问题解决啦。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信手机端背景滑动特效

    随着微信平台的发展,微信公众号变的也相当火爆,成为了众多商家吸引大众眼球的一个基地。这些商家在这个平台上发布自己的活动,这些活动需要程序员来使用网页代码来实现,...

    无邪Z
  • 去除inline-block元素间间距

    将代码执行之后我们会发现这个宽度为900的div居然放不下这三个宽度为300的a标签。原因在于他们之间有一个间隔。下面我来说一下如何去除这个水平间距和垂直间距。

    无邪Z
  • 自适应表头和左侧列固定的表格

    在网站建设中,表格的出现提供了数据对比的便利以及数据查看的便利。但是当表格数据过多时,在同一个屏幕下无法完全展示,出现滚动条后,表头部分就被盖住,很容易不清楚看...

    无邪Z
  • 无缝滚动案例简单实现代码

    <!doctype html> <html> <meta charset="utf-8"> <head> <title></title> <st...

    用户1730674
  • 如何清除浮动

    如何清除浮动 大家都知道,浮动会对文档产生影响,具体来看看会对文档产生什么影响? 清除浮动后的效果: ? 未清除浮动后的效果: ? 实例代码(未清除浮动): ...

    HTML5学堂
  • 简单实用的纯CSS百分比圆形进度条代码解析/源码下载

    percircle是一款简单实用的纯CSS百分比圆形进度条插件。你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮...

    用户5997198
  • CSS3实现饼图扇形loading效果

    2. 当我们煎饼动画转起的一瞬间,我们让假的饼子隐藏回家打酱油去。于是,从上面看,我们看到的就是满满一层的鸡蛋。

    javascript.shop
  • 伪类,图片中出现文字·

    Wyc
  • html+css 多彩滚动展示AD框前端显示代码

    因为放首页蛮占地方的,这个小模块没有经受住小改版的考验,被去掉了。贴出来,已给以后用

    AlexTao
  • 讲一下怎么区分伪类、伪元素,同时优雅的处理页面浮动的问题

    首先介绍一下什么是伪类:伪类其实我们经常用的到,只是我们自己不会刻意的说这个是伪类这样的一个东西,我下面简单的举个例子就明白了怎么回事

    何处锦绣不灰堆

扫码关注云+社区

领取腾讯云代金券