常見佈局

時間 2019-11-16

標籤常見佈局简体版

原文原文鏈接

聖盃佈局css

效果：左右寬度固定，縮小頁面，中間盒子隨頁面變化html

原理：父盒子裏三個子盒子，三個子盒子都左浮動，給左盒子margin-left:-100%,右盒子margin-left:右盒子的寬，這樣在一個水平內，但左右盒子蓋住中間的盒子ide

，給父盒子加padding值，在給左右盒子position:relative,（相對定位是相對於原來的位置）。佈局

缺點：不能無限縮小，頁面縮小到左右盒子寬的和時，佈局會亂spa

解決：給body{min-width:大於左右盒子的寬度和}3d

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 <style type="text/css">
 7     body,div{margin:0;padding:0;}
 8     body{min-width:700px;}
 9 .column{
10     height:300px;float:left;
11 }
12 .main{
13     width:100%;background:red;
14 }
15 .left{
16     width:200px;margin-left:-100%;background:blue;
17     position:relative;left:-200px;
18 }
19 .right{width:200px;margin-left:-200px; background:orange;
20 position:relative;left:200px;
21 }
22 .container{
23     padding:0 200px 0 200px;
24 }
25 
26 </style>
27 
28 
29 </head>
30 <body>
31     <div class="container">
32         <div class="column main">acvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
33         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
34         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
35         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
36         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
37         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
38         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf</div>
39         <div class="column left"></div>
40         <div class="column right"></div>
41     </div>
42 </body>
43 </html>

View Code

雙飛翼佈局code

效果同聖盃佈局htm

原理：中間盒子內加一個盒子，給margin屬性blog

缺點：不能無限縮小，頁面縮小到左右盒子寬的和時，佈局會亂it

解決：給body{min-width:大於左右盒子的寬度和}

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 <style type="text/css">
 7     body,div{margin:0;padding:0;}
 8     body{min-width:700px;}
 9 .column{
10     height:300px;float:left;
11 }
12 .main{
13     width:100%;
14 }
15 .inner{
16     height:300px;background:red;width:100%;
17     margin:0 200px 0 200px;
18 }
19 .left{
20     width:200px;margin-left:-100%;background:blue;
21 
22 }
23 .right{width:200px;margin-left:-200px; background:orange;
24 
25 }
26 
27 
28 </style>
29 
30 
31 </head>
32 <body>
33     <div class="container">
34         <div class="column main">
35 <div class="inner">
36         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
37         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
38         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
39         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
40         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
41         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
42         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf</div>
43         </div>
44         <div class="column left"></div>
45         <div class="column right"></div>
46     </div>
47 </body>
48 </html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。