左右固定,中间自适应布局(方法5以后进阶,实现中间栏优先加载)
来源:互联网 发布:极客学院java视频下载 编辑:程序博客网 时间:2024/06/04 21:59
html代码:
<div id="left">左边栏</div>
<div id="right">右边栏</div>
<div id="main">主内容</div>
方法一:利用绝对定位方法(不推荐)
css部分:
body {margin: 0;padding: 0; height: 100%;}
#left,#right {position: absolute; top:0; width: 220px; height: 100%;background:pink;}
#left {left: 0;}
#right { right:0;}
#main {margin: 0 230px; height: 100%;}
这种方法是最简单,也是麻烦最多的,如果中间栏含有最小宽度限制,或是含有宽度的内部元素,当浏览器宽度小到一定程度,会发生层重叠的情况。
方法二:采用的是浮动布局
css部分:
#left,#right { float: left; width: 220px; height: 200px; background: blue;}
#right { float: right;}
#main { margin: 0 230px;background: red; height: 200px;}
这种方法我利用的就是浮动原理,左右定宽度分别进行左浮动和右浮动,此时主内容列(中间列没有定度)主会自动插入到左右两列的中间,最要注意的一点是,中间列一定要放在左右两列的后面
方法三:margin方法
css部分:
#left{ width:200px; float:left;margin-right:-200px; background-color:#FF9900}
#main{ width:auto;background:#00FF00;margin:0 220px;}
#right{ width:200px;margin-left:-200px; float:right; background-color:#CCCC00}
左右设置后,使用margin
方法四:个人感觉最简单方法:
css部分:
#left{ width:200px; float:left;}
#mid{ width:auto;}
#right{ width:200px; float:right;}
中间使用width:auto;左右分别左右浮动
方法五:实现中间栏优先加载(重要部分优先加载)
html部分:
<div class="main-2">
<div class="main-wrap-2">main-wrap</div>
</div>
<div class="sub-2">sub</div>
<div class="extra-2">extra</div>
css部分:
.main-2{ float:left; width:100%;margin-bottom:-3000px; padding-bottom:3000px;background:#F90;}
.main-wrap-2{ margin:0 200px 0 150px; }
.sub-2{ float:left; margin-left:-100%; width:150px; background:#6C0; margin-bottom:-3000px; padding-bottom:3000px;}
.extra-2{ float:left; margin-left:-200px; width:200px; background:#F9F; margin-bottom:-3000px; padding-bottom:3000px;}
优先加载关键在于重要内容在html里面必须在前面,所有main部分移到了最上面
较完整内容可以参考——双飞翼布局:
<style type="text/css">
*{ margin:0; padding:0px;}
.header{ background:#666; text-align:center;}
.body{ overflow:hidden;*zoom:1;}
.wrap-2{ margin-top:30px;}
.wrap-2 .main-2{ float:left; width:100%;margin-bottom:-3000px; padding-bottom:3000px;background:#F90;}
.wrap-2 .main-wrap-2{ margin:0 200px 0 150px; }
.wrap-2 .sub-2{ float:left; margin-left:-100%; width:150px; background:#6C0; margin-bottom:-3000px; padding-bottom:3000px;}
.wrap-2 .extra-2{ float:left; margin-left:-200px; width:200px; background:#F9F; margin-bottom:-3000px; padding-bottom:3000px;}
.footer{ background:#666; text-align:center;}
</style>
<div class="wrap-2">
<div class="header">Header</div>
<div class="body">
<div class="main-2"><div class="main-wrap-2"><p>main-wrap</p><p>main-wrap</p></div></div>
<div class="sub-2"><p>sub</p><p>sub</p><p>sub</p></div>
<div class="extra-2"><p>extra</p><p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p></div>
</div>
<div class="footer">Footer</div>
</div>
方法六:中间栏优先加载,采用css3 方法:
[html]<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>自适应宽度,左右两栏固定宽度,中间栏优先加载</title>
<style>
.container{
display:-moz-box;
display:-webkit-box;
}
div{
padding:10px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.sider_l{
width:250px;
-moz-box-ordinal-group:1;
-webkit-box-ordinal-group:1;
background:limegreen;
}
.middle_content{
-moz-box-flex:1;
-webkit-box-flex:1;
-moz-box-ordinal-group:2;
-webkit-box-ordinal-group:2;
background:lightpink;
}
.sider_r{
width:250px;
-moz-box-ordinal-group:3;
-webkit-box-ordinal-group:3;
background:green;
}
</style>
</head>
<body>
<div class="container">
<div class="middle_content">优先加载主内容区</div>
<div class="sider_l">左边栏</div>
<div class="sider_r">右边栏</div>
</div>
</body>
</html>
[/html]
方法七:中间栏优先加载position:absolute方法
<style type="text/css">
html,body{width:100%;height:100%;margin:0;padding:0;}
.content{width:100%;height:100%;position:relative;background:#CFF;overflow:hidden;}
.left{width:200px;height:100%;background:#0F0;position:absolute;z-index:1001;top:0;left:0;}
.center-ct{height:100%;background:#60F;position:absolute;z-index:900;top:0;left:0;margin:0;width:100%;}
.center{margin:0 200px;}
.right{width:200px;height:100%;background:#FF0;position:absolute;z-index:1000;right:0;top:0;}
</style>
</head>
<body>
<div class="content">
<div class="center-ct">
<div class="center">
center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
- 左右固定,中间自适应布局(方法5以后进阶,实现中间栏优先加载)
- 如何实现:左右固定,中间自适应布局,中间栏优先加载?
- 三栏布局,中间自适应,左右固定实现方法
- 三栏自适应布局实现(左右固定宽度,中间自适应)
- 三栏布局:左右固定,中间自适应
- margin负值实现左右固定中间自适应布局
- 3列布局左右自适应中间固定
- 网页布局,左右固定,中间自适应
- css 左右固定,中间自适应的布局
- 三列布局-左右固定,中间自适应
- 三栏布局——左右固定,中间自适应
- 三列布局(左右固定宽度,中间自适应)
- css3布局-左右两栏固定宽度,中间栏优先加载
- Flex布局实现圣杯布局,左右两列固定、中间列自适应的三列式布局
- 左右宽度固定,中间自适应
- 三栏布局,自适应宽度,中间优先加载
- 如何实现两边固定,中间自适应的三栏布局?
- FLEX实现两侧边栏固定中间自适应布局
- c++对文件的操作
- openfire外部组件的编写-使用whack
- “手把手教你学linux驱动开发”OK6410系列之02---虚拟字符设备
- Spring + Hibernate 结合后不能自动建立数据库表的解决方法
- POJ 1182
- 左右固定,中间自适应布局(方法5以后进阶,实现中间栏优先加载)
- 小光棍数
- “手把手教你学linux驱动开发”OK6410系列之03---LED字符设备驱动
- directshow下载及运行示例程序错误的解决方法
- 结构体---函数----形参&&返回值
- c++编译器什么时候生成默认构造函数
- 纹理贴图 小结
- 数据库操作转载
- 【Oracle入门系列】第00章_序