左边层宽度固定,右边层宽度自适应写法
来源:互联网 发布:武汉软件测试 编辑:程序博客网 时间:2024/05/17 02:45
前段时间遇到这个情况,找到一个比较合适的解决办法。
下面两句是重点。IE,FF下测试通过。放出代码希望有所帮助~
.divGlobal,.DivTop,.DivBottom{min-width: 760px;width: expression(document.body.clientWidth < 760? "760px": "100%" )/*最小宽度设置*/;width:100%;}
.DivMainLeft{float:left;}
.DivMainRight{margin-left:210px;}
=========分割线========
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.divGlobal,.DivTop,.DivBottom{min-width: 760px;width: expression(document.body.clientWidth < 760? "760px": "100%" )/*最小宽度设置*/;width:100%;}
.divGlobal{/*border:1px solid #ff0000;*/}
.DivTop,.DivBottom,.DivMainLeft,.DivMainRight {border:1px solid #ff0000;}
.DivBottom {clear: both;}
.DivMainLeft{float:left;}
.DivMainRight{margin-left:210px;}
.DivFiexWidth{width:200px;}
.DivMainRightChild{}
.clear{clear: both;}
ul.ul1{margin:0px;margin-left:0px;padding-left:0px; /*fiexfox里需要设置此项,否则UR和DIV间会有空白*/}
li.li1{margin-left:0px;list-style-type:none;}
li.liBg {margin-left:0px;background-color:#ffDD00;list-style-type:none;padding:5px;}
</style>
</HEAD>
<BODY>
<script>
// alert(document.body.clientWidth);
//alert(document.body.clientWidth < 760? "760px": "100%" );
</script>
<div class="DivTop">
top
</div>
<div class="divGlobal">
<div class="DivMainLeft">
<div class="DivFiexWidth">
<ul class="ul1">
<li class ="liBg">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
</ul>
</div>
<div class="DivFiexWidth">
<ul class="ul1">
<li class ="liBg">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
</ul>
</div>
<!-- <div class="DivFiexWidth">
<ul class="ul1">
<li class ="liBg">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
</ul>
</div>
<div class="DivFiexWidth">
<ul class="ul1">
<li class ="liBg">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
</ul>
</div>
<div class="DivFiexWidth">
<ul class="ul1">
<li class ="liBg">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
</ul>
</div> -->
</div>
<div class="DivMainRight">
<div class="DivMainRightChild" >
<ul class="ul1">
<li class ="liBg">右边宽度自适应.</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
</ul>
</div>
<div class="DivMainRightChild" >
<ul class="ul1">
<li class ="liBg">右边宽度自适应.</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
</ul>
</div>
<div class="DivMainRightChild" >
<ul class="ul1">
<li class ="liBg">右边宽度自适应.</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
</ul>
</div>
</div>
</div>
<div class="DivBottom">
DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;firefox ie测试通过.
辛苦几天的结果啊
平行共三行,中间行分两列,左边固定宽度,右边自适应,并且对行宽度设置了最小值,如果窗口小到最小值以下将出现滚动条,这样一来布局就不会乱了.
</div>
</BODY>
</HTML>
下面两句是重点。IE,FF下测试通过。放出代码希望有所帮助~
.divGlobal,.DivTop,.DivBottom{min-width: 760px;width: expression(document.body.clientWidth < 760? "760px": "100%" )/*最小宽度设置*/;width:100%;}
.DivMainLeft{float:left;}
.DivMainRight{margin-left:210px;}
=========分割线========
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.divGlobal,.DivTop,.DivBottom{min-width: 760px;width: expression(document.body.clientWidth < 760? "760px": "100%" )/*最小宽度设置*/;width:100%;}
.divGlobal{/*border:1px solid #ff0000;*/}
.DivTop,.DivBottom,.DivMainLeft,.DivMainRight {border:1px solid #ff0000;}
.DivBottom {clear: both;}
.DivMainLeft{float:left;}
.DivMainRight{margin-left:210px;}
.DivFiexWidth{width:200px;}
.DivMainRightChild{}
.clear{clear: both;}
ul.ul1{margin:0px;margin-left:0px;padding-left:0px; /*fiexfox里需要设置此项,否则UR和DIV间会有空白*/}
li.li1{margin-left:0px;list-style-type:none;}
li.liBg {margin-left:0px;background-color:#ffDD00;list-style-type:none;padding:5px;}
</style>
</HEAD>
<BODY>
<script>
// alert(document.body.clientWidth);
//alert(document.body.clientWidth < 760? "760px": "100%" );
</script>
<div class="DivTop">
top
</div>
<div class="divGlobal">
<div class="DivMainLeft">
<div class="DivFiexWidth">
<ul class="ul1">
<li class ="liBg">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
</ul>
</div>
<div class="DivFiexWidth">
<ul class="ul1">
<li class ="liBg">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
</ul>
</div>
<!-- <div class="DivFiexWidth">
<ul class="ul1">
<li class ="liBg">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
</ul>
</div>
<div class="DivFiexWidth">
<ul class="ul1">
<li class ="liBg">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
</ul>
</div>
<div class="DivFiexWidth">
<ul class="ul1">
<li class ="liBg">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
<li class ="li1">左边固定宽度</li>
</ul>
</div> -->
</div>
<div class="DivMainRight">
<div class="DivMainRightChild" >
<ul class="ul1">
<li class ="liBg">右边宽度自适应.</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
</ul>
</div>
<div class="DivMainRightChild" >
<ul class="ul1">
<li class ="liBg">右边宽度自适应.</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
</ul>
</div>
<div class="DivMainRightChild" >
<ul class="ul1">
<li class ="liBg">右边宽度自适应.</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
<li class ="li1">右边宽度自适应</li>
</ul>
</div>
</div>
</div>
<div class="DivBottom">
DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;firefox ie测试通过.
辛苦几天的结果啊
平行共三行,中间行分两列,左边固定宽度,右边自适应,并且对行宽度设置了最小值,如果窗口小到最小值以下将出现滚动条,这样一来布局就不会乱了.
</div>
</BODY>
</HTML>
- 左边层宽度固定,右边层宽度自适应写法
- 左边固定宽度右边自适应
- 右边宽度固定,左边宽度自适应
- 右边固定宽度,左边自适应宽度
- 实现左边固定宽度右边自适应布局
- 实现一个左边宽度固定,右边自适应
- 左边div固定宽度,右边div宽度自适应
- 左边div固定宽度,右边div自适应填充
- 左边固定宽度右边自适应的三种方法
- css布局-两列,左边宽度自适应,右边固定宽度200px
- css实现左边div固定宽度,右边div自适应撑满剩下的宽度
- css实现左边div固定宽度,右边div自适应撑满剩下的宽度
- 左边固定,右边自动适应宽度
- 右边DIV撑满左边固定宽度
- 左边定宽,右边自适应宽度布局
- 利用绝对定位实现两列右边固定宽度左边自适应布局
- css三列布局,左边两个div固定,最右边宽度自适应
- 实现一个div,左边固定div宽度200px,右边div自适应
- 人无聊的时候会有很多的想法。。
- 什么叫java的框架 (转)
- [VBA]文件操作及目录操作之一
- EAS中如何打开和关闭系统的rpc日志收集开关。
- Linux下的C编程实战之开发平台搭建
- 左边层宽度固定,右边层宽度自适应写法
- 相当实用的Ubuntu命令大全
- SQL找出不連續的數列
- Sql server database:create table-valued function
- Debian另类安装,windows下网络安装(说"另类"一点不过分)[转]
- 让你的XAML运动起来
- 也谈面试
- 《C#与.NET3.0高级程序设计》读书笔记(二)
- vs.net中打开数据库中的文件(保存/下载)