注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

千年绿叶

黑夜给了我黑色的眼睛,我却用它来寻找光明......

 
 
 

日志

 
 

缩小浏览器窗口,布局不乱  

2012-10-24 11:26:18|  分类: 网页设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

   最近在做项目时,遇到一个问题,布局结构如下:

<div class="all">
 <div class="L">我是左侧哦</div>
    <div class="R">右边右边</div>
</div>

其中,all必须100%可申缩;L是左侧菜单,定宽;R是右侧工作区,可自由申缩。

.all{
 width:100%;
 height:500px;
 margin:0 auto;
 border:1px dashed #f00;
}
.L{
 width:200px;
 overflow:hidden;
 float:left;
 background-color:#090;
}
.R{
 height:400px;

width:80%;
 background-color:#F96;

 float:left;
}

样式如上所示,这样的后果是:当用户缩小浏览器窗口时,R跑到L下面,如下图

缩小浏览器窗口,布局不乱 - 千年绿叶 - 千年绿叶
解决方法:
方法一:把R变成这样,去掉宽;
.R{
 height:400px;
  background-color:#F96;
 float:left;
}
 
方法二:
.R{
 height:400px;
 margin-left:200px;
 position:relative;
 background-color:#F96;
}

不知道大家留意到没有,这个是后台界面常见的布局,但是上面的布局CSS定义有问题的,all其实不可以固定高度,R也不可以固定高度,此时解决的方式只能用方法二,且高度去掉!!!

  评论这张
 
阅读(1552)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017