左右固定，中间自适应布局，中间栏优先加载

html代码：

方法一：利用绝对定位方法(不推荐)

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>

<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部分移到了最上面

较完整内容可以参考——双飞翼布局：

方法六：中间栏优先加载，采用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方法

posted @ 2013-08-21 23:05 yexingwen 阅读(4227) 评论(1) 编辑收藏举报

刷新页面返回顶部

左右固定，中间自适应布局，中间栏优先加载

公告