如何实现：左右固定，中间自适应布局，中间栏优先加载？
Posted 箫声远
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何实现：左右固定，中间自适应布局，中间栏优先加载？相关的知识，希望对你有一定的参考价值。
1 html代码：
2
3 <div id="left">左边栏</div>
4 <div id="right">右边栏</div>
5 <div id="main">主内容</div>
6
7 方法一：利用绝对定位方法(不推荐)
8
9 css部分：
10
11 body {margin: 0;padding: 0; height: 100%;}
12 #left,#right {position: absolute; top:0; width: 220px; height: 100%;background:pink;}
13 #left {left: 0;}
14 #right { right:0;}
15 #main {margin: 0 230px; height: 100%;}
16
17 这种方法是最简单，也是麻烦最多的，如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。
18
19
20
21 方法二：采用的是浮动布局
22
23 css部分：
24
25
26
27 #left,#right { float: left; width: 220px; height: 200px; background: blue;}
28
29 #right { float: right;}
30
31 #main { margin: 0 230px;background: red; height: 200px;}
32
33 这种方法我利用的就是浮动原理，左右定宽度分别进行左浮动和右浮动，此时主内容列（中间列没有定度）主会自动插入到左右两列的中间，最要注意的一点是，中间列一定要放在左右两列的后面
34
35
36
37 方法三：margin方法
38
39 css部分：
40
41
42
43 #left{ width:200px; float:left;margin-right:-200px; background-color:#FF9900}
44
45 #main{ width:auto;background:#00FF00;margin:0 220px;}
46
47 #right{ width:200px;margin-left:-200px; float:right; background-color:#CCCC00}
48
49 左右设置后，使用margin
50
51
52
53 方法四：个人感觉最简单方法：
54
55 css部分：
56
57
58
59 #left{ width:200px; float:left;}
60
61 #mid{ width:auto;}
62
63 #right{ width:200px; float:right;}
64
65 中间使用width:auto;左右分别左右浮动
66
67
68
69 方法五：实现中间栏优先加载（重要部分优先加载）
70
71 html部分：
72
73
74
75 <div class="main-2">
76
77 <div class="main-wrap-2">main-wrap</div>
78
79 </div>
80
81 <div class="sub-2">sub</div>
82
83 <div class="extra-2">extra</div>
84
85 css部分：
86
87
88
89 .main-2{ float:left; width:100%;margin-bottom:-3000px; padding-bottom:3000px;background:#F90;}
90
91 .main-wrap-2{ margin:0 200px 0 150px; }
92
93 .sub-2{ float:left; margin-left:-100%; width:150px; background:#6C0; margin-bottom:-3000px; padding-bottom:3000px;}
94
95 .extra-2{ float:left; margin-left:-200px; width:200px; background:#F9F; margin-bottom:-3000px; padding-bottom:3000px;}
96
97
98
99 优先加载关键在于重要内容在html里面必须在前面，所有main部分移到了最上面
100
101
102
103 较完整内容可以参考——双飞翼布局：
104
105 <style type="text/css">
106 *{ margin:0; padding:0px;}
107 .header{ background:#666; text-align:center;}
108 .body{ overflow:hidden;*zoom:1;}
109 .wrap-2{ margin-top:30px;}
110 .wrap-2 .main-2{ float:left; width:100%;margin-bottom:-3000px; padding-bottom:3000px;background:#F90;}
111 .wrap-2 .main-wrap-2{ margin:0 200px 0 150px; }
112 .wrap-2 .sub-2{ float:left; margin-left:-100%; width:150px; background:#6C0; margin-bottom:-3000px; padding-bottom:3000px;}
113 .wrap-2 .extra-2{ float:left; margin-left:-200px; width:200px; background:#F9F; margin-bottom:-3000px; padding-bottom:3000px;}
114 .footer{ background:#666; text-align:center;}
115 </style>
116
117 <div class="wrap-2">
118 <div class="header">Header</div>
119 <div class="body">
120 <div class="main-2"><div class="main-wrap-2"><p>main-wrap</p><p>main-wrap</p></div></div>
121 <div class="sub-2"><p>sub</p><p>sub</p><p>sub</p></div>
122 <div class="extra-2"><p>extra</p><p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p></div>
123 </div>
124 <div class="footer">Footer</div>
125 </div>
126
127
128
129 方法六：中间栏优先加载，采用css3 方法：
130
131 [html]<!DOCTYPE HTML>
132 <html>
133 <head>
134 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
135 <title>自适应宽度，左右两栏固定宽度，中间栏优先加载</title>
136 <style>
137 .container{
138 display:-moz-box;
139 display:-webkit-box;
140 }
141 div{
142 padding:10px;
143 -moz-box-sizing:border-box;
144 -webkit-box-sizing:border-box;
145 }
146 .sider_l{
147 width:250px;
148 -moz-box-ordinal-group:1;
149 -webkit-box-ordinal-group:1;
150 background:limegreen;
151 }
152 .middle_content{
153 -moz-box-flex:1;
154 -webkit-box-flex:1;
155 -moz-box-ordinal-group:2;
156 -webkit-box-ordinal-group:2;
157 background:lightpink;
158 }
159 .sider_r{
160 width:250px;
161 -moz-box-ordinal-group:3;
162 -webkit-box-ordinal-group:3;
163 background:green;
164 }
165 </style>
166 </head>
167
168 <body>
169 <div class="container">
170 <div class="middle_content">优先加载主内容区</div>
171 <div class="sider_l">左边栏</div>
172 <div class="sider_r">右边栏</div>
173 </div>
174 </body>
175 </html>
176 [/html]
177
178
179
180 方法七：中间栏优先加载position:absolute方法
181
182 <style type="text/css">
183 html,body{width:100%;height:100%;margin:0;padding:0;}
184 .content{width:100%;height:100%;position:relative;background:#CFF;overflow:hidden;}
185 .left{width:200px;height:100%;background:#0F0;position:absolute;z-index:1001;top:0;left:0;}
186 .center-ct{height:100%;background:#60F;position:absolute;z-index:900;top:0;left:0;margin:0;width:100%;}
187 .center{margin:0 200px;}
188 .right{width:200px;height:100%;background:#FF0;position:absolute;z-index:1000;right:0;top:0;}
189 </style>
190 </head>
191
192 <body>
193 <div class="content">
194 <div class="center-ct">
195 <div class="center">
196 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
197 </div>
198 </div>
199 <div class="left">left</div>
200 <div class="right">right</div>
201 </div>
202 </body>
203 </html>
以上是关于如何实现：左右固定，中间自适应布局，中间栏优先加载？的主要内容，如果未能解决你的问题，请参考以下文章