如何实现:左右固定,中间自适应布局,中间栏优先加载?

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>

以上是关于如何实现:左右固定,中间自适应布局,中间栏优先加载?的主要内容,如果未能解决你的问题,请参考以下文章

《web前端笔记30》css三栏布局、左右两栏宽度固定,中间自适应

三栏布局,中间自适应,左右固定实现方法

两栏布局——左侧固定右侧自适应

左右两栏固定宽度,中间自适应布局的5种方案

三栏布局 左右固定 中间自适应

圣杯布局浅析