這種布局方式除了是很常見的面試題，更重要的，他還是很常見的一種頁面布局。因此必須要掌握幾種制作情況。
這里我先列出幾種我總結的，可能有些不足，希望大家也可以留言補充，我再整理成更完善的。
在分條展示實現方案前，我先把通用的css貼一下：
*{
margin: 0;
padding: 0;
}
html{
font-family: "微軟雅黑";
}
ul li{
list-style: none;
}
a:link,a:hover{
text-decoration: none;
}
.clearfix{
*zoom:1;
}
.clearfix:after{
height: 0;
clear: both;
content: "";
visibility: hidden;
display: block;
}
.fl{
float: left;
}
.fr{
float: right;
}
h3,.tips-info{
margin: 8px 0;
font-size: 14px;
}
li{
margin-bottom: 10px
}
.tips,ol{
background: #fffbfb;
padding: 10px 20px;
}
.tips-ex{
font-size: 12px;
color: #99c1c1;
}
.block{
padding: 10px 20px;
border-top: 5px solid #99c1c1;
margin: 30px 0 0px;
background: #f5f5f5;
}
.browser,.container{
padding: 20px;
}
.container{
font-size: 14px;
}
.container,.img-box{
background: #eee;
border: 1px solid #999;
}
.box{
background: #fff;
padding: 20px;
border: 1px solid #999;
}
.team-box{
width: 158px;
}
.info-box{
}
.person-box{
width: 78px;
}
.person-box .img-box{
margin-bottom: 20px;
}
.person-box .img-box:last-child{
margin: 0;
}
.img-box{
width: 78px;
}
.img-txt{
line-height: 20px;
margin: 20px 0;
text-align: center;
padding: 0 5px;
}
.team-name{
width: 78px;
height: 80px;
text-align: center;
}
主要是以下幾種方案基礎代碼、無關痛癢的樣式代碼和左中右三欄各自需要提前固定的尺寸代碼。
以下分幾種情況實現：
第一種，float布局實現
這絕對是我大腦能第一下想到的！
左右兩欄分別左浮動、右浮動。
中間欄使用margin/padding撐開左右兩欄需要占據的位置即可。
代碼：
html：
1 <div class="browser"> 2 <div class="container f-cont clearfix"> 3 <div class="box team-box clearfix"> 4 <div class="img-box"> 5 <div class="img-txt">團隊logo 80x80</div> 6 </div> 7 <div class="team-name">團隊名稱</div> 8 </div> 9 <div class="box person-box clearfix"> 10 <div class="img-box"> 11 <div class="img-txt">個人logo 80x80</div> 12 </div> 13 <div class="img-box"> 14 <div class="img-txt">個人logo 80x80</div> 15 </div> 16 <div class="img-box"> 17 <div class="img-txt">個人logo 80x80</div> 18 </div> 19 <div class="img-box"> 20 <div class="img-txt">個人logo 80x80</div> 21 </div> 22 </div> 23 <div class="box info-box"> 24 <div> 25 <h3>關於你們團隊的介紹</h3> 26 <span>可以給我們解釋一下團隊名稱得來歷，或是分別介紹你們的團隊成員。（以下為示例）</span> 27 <p>頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構文件中直接使用 app.wxss 中指定的樣式規則。index.json 是頁面的配置文件：頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。</p> 28 <h3>又一個小標題</h3> 29 <p> 30 頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。 31 </p> 32 </div> 33 </div> 34 </div> 35 </div>
css關鍵點：
.f-cont .team-box,.img-box,.team-name{
float: left;
}
.f-cont .person-box{
float: right;
}
.f-cont .info-box,.p-cont .info-box{
margin: 0 140px 0 220px;
}
看下動態效果：
第二種，定位布局+margin
左右欄分別使用absolute定位，同float一樣，左邊的定位left 0，右邊的定位right 0；
中間還是用margin或padding撐開左右欄需要占據的位置即可。（利用了浮動或定位時，結構飄起來不占據文檔空間的特點）
代碼：
html：
1 <div class="browser"> 2 <div class="container p-cont"> 3 <div class="box team-box clearfix"> 4 <div class="img-box"> 5 <div class="img-txt">團隊logo 80x80</div> 6 </div> 7 <div class="team-name">團隊名稱</div> 8 </div> 9 <div class="box info-box"> 10 <div> 11 <h3>關於你們團隊的介紹</h3> 12 <span>可以給我們解釋一下團隊名稱得來歷，或是分別介紹你們的團隊成員。（以下為示例）</span> 13 <p>頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構文件中直接使用 app.wxss 中指定的樣式規則。index.json 是頁面的配置文件：頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。</p> 14 <h3>又一個小標題</h3> 15 <p> 16 頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。 17 </p> 18 </div> 19 </div> 20 <div class="box person-box clearfix"> 21 <div class="img-box"> 22 <div class="img-txt">個人logo 80x80</div> 23 </div> 24 <div class="img-box"> 25 <div class="img-txt">個人logo 80x80</div> 26 </div> 27 <div class="img-box"> 28 <div class="img-txt">個人logo 80x80</div> 29 </div> 30 <div class="img-box"> 31 <div class="img-txt">個人logo 80x80</div> 32 </div> 33 </div> 34 </div> 35 </div>
css：
.p-cont{
position: relative;
height: 430px;
}
.p-cont .team-box,.p-cont .person-box{
position: absolute;
top: 20px;
z-index: 9;
}
.p-cont .team-box{
left: 20px;
}
.p-cont .person-box{
right: 20px;
}
不足：
不過這種布局有點缺點就是，父元素需要設置固定高度，中間自適應時，如果內容過多而寬度又過窄，會導致高度被迫增加，嚴重時沖破父元素高度，產生溢出的現象：
第三種，display-table 實現
父元素display：table；
左右子元素使用display：table-cell；
中間正常文檔流，margin撐開間距即可
代碼：
html：
<div class="browser"> <div class="container d-cont"> <div class="cell"> <div class="box team-box clearfix"> <div class="img-box"> <div class="img-txt">團隊logo 80x80</div> </div> <div class="team-name">團隊名稱</div> </div> </div> <div class="box info-box"> <div> <h3>關於你們團隊的介紹</h3> <span>可以給我們解釋一下團隊名稱得來歷，或是分別介紹你們的團隊成員。（以下為示例）</span> <p>頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構文件中直接使用 app.wxss 中指定的樣式規則。index.json 是頁面的配置文件：頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。</p> <h3>又一個小標題</h3> <p> 頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。 </p> </div> </div> <div class="cell"> <div class="box person-box clearfix"> <div class="img-box"> <div class="img-txt">個人logo 80x80</div> </div> <div class="img-box"> <div class="img-txt">個人logo 80x80</div> </div> <div class="img-box"> <div class="img-txt">個人logo 80x80</div> </div> <div class="img-box"> <div class="img-txt">個人logo 80x80</div> </div> </div> </div> </div> </div>
css：
.d-cont{
display: table;
}
.d-cont .cell{
display: table-cell;
vertical-align: top;
}
.d-cont .info-box{
margin: 0 20px;
}
看下效果：
第四種，浮動 + margin負邊距
代碼：
html：
1 <div class="browser"> 2 <div class="container m-cont clearfix"> 3 <div class="m-c"> 4 <div class="box info-box"> 5 <div> 6 <h3>關於你們團隊的介紹</h3> 7 <span>可以給我們解釋一下團隊名稱得來歷，或是分別介紹你們的團隊成員。（以下為示例）</span> 8 <p>頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構文件中直接使用 app.wxss 中指定的樣式規則。index.json 是頁面的配置文件：頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。</p> 9 <h3>又一個小標題</h3> 10 <p> 11 頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。 12 </p> 13 </div> 14 </div> 15 </div> 16 <div class="m-l"> 17 <div class="box team-box clearfix"> 18 <div class="img-box"> 19 <div class="img-txt">團隊logo 80x80</div> 20 </div> 21 <div class="team-name">團隊名稱</div> 22 </div> 23 </div> 24 <div class="m-r"> 25 <div class="box person-box clearfix"> 26 <div class="img-box"> 27 <div class="img-txt">個人logo 80x80</div> 28 </div> 29 <div class="img-box"> 30 <div class="img-txt">個人logo 80x80</div> 31 </div> 32 <div class="img-box"> 33 <div class="img-txt">個人logo 80x80</div> 34 </div> 35 <div class="img-box"> 36 <div class="img-txt">個人logo 80x80</div> 37 </div> 38 </div> 39 </div> 40 </div> 41 </div>
css：
.m-l,.m-c,.m-r{
float: left;
}
.m-l{
margin-left: -100%;
}
.m-c{
margin: 0 140px 0 220px;
}
.m-r{
margin-left: -120px;
}
效果：
第五種，css3 - flex
代碼：
html：
1 <div class="browser"> 2 <div class="container fx-cont"> 3 <div class="cell"> 4 <div class="box team-box clearfix"> 5 <div class="img-box"> 6 <div class="img-txt">團隊logo 80x80</div> 7 </div> 8 <div class="team-name">團隊名稱</div> 9 </div> 10 </div> 11 <div class="cell"> 12 <div class="box info-box"> 13 <div> 14 <h3>關於你們團隊的介紹</h3> 15 <span>可以給我們解釋一下團隊名稱得來歷，或是分別介紹你們的團隊成員。（以下為示例）</span> 16 <p>頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構文件中直接使用 app.wxss 中指定的樣式規則。index.json 是頁面的配置文件：頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。</p> 17 <h3>又一個小標題</h3> 18 <p> 19 頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。 20 </p> 21 </div> 22 </div> 23 </div> 24 <div class="cell"> 25 <div class="box person-box clearfix"> 26 <div class="img-box"> 27 <div class="img-txt">個人logo 80x80</div> 28 </div> 29 <div class="img-box"> 30 <div class="img-txt">個人logo 80x80</div> 31 </div> 32 <div class="img-box"> 33 <div class="img-txt">個人logo 80x80</div> 34 </div> 35 <div class="img-box"> 36 <div class="img-txt">個人logo 80x80</div> 37 </div> 38 </div> 39 </div> 40 </div> 41 </div>
css：
.fx-cont{
display: -webkit-flex;
display: flex;
}
.fx-cont .info-box{
flex: 1;
margin: 0 20px;
}
整篇源代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <meta name="author" content="xing.org1^ guojufeng"> 9 <title>三欄布局-中間自適應的寫法總結</title> 10 <link rel="stylesheet" href="style.css"> 11 </head> 12 13 <body> 14 <!-- 1 float --> 15 <h3 class="block">第一種方法-float</h3> 16 <div class="tips"> 17 <h4 class="tips-info">關鍵點</h4> 18 <ol> 19 <li>結構順序：左，中，右</li> 20 <li>中間盒模型的margin-left、margin-right分別是左右盒模型的寬度、障眼法:中間盒模型使用margin屬性，留出左右元素的寬度，既可以使中間元素自適應屏幕寬度。</li> 21 <li>注意，結構上，左邊盒模型、右邊盒模型、中間盒模型</li> 22 </ol> 23 </div> 24 <div class="browser"> 25 <div class="container f-cont clearfix"> 26 <div class="box team-box clearfix"> 27 <div class="img-box"> 28 <div class="img-txt">團隊logo 80x80</div> 29 </div> 30 <div class="team-name">團隊名稱</div> 31 </div> 32 <div class="box person-box clearfix"> 33 <div class="img-box"> 34 <div class="img-txt">個人logo 80x80</div> 35 </div> 36 <div class="img-box"> 37 <div class="img-txt">個人logo 80x80</div> 38 </div> 39 <div class="img-box"> 40 <div class="img-txt">個人logo 80x80</div> 41 </div> 42 <div class="img-box"> 43 <div class="img-txt">個人logo 80x80</div> 44 </div> 45 </div> 46 <div class="box info-box"> 47 <div> 48 <h3>關於你們團隊的介紹</h3> 49 <span>可以給我們解釋一下團隊名稱得來歷，或是分別介紹你們的團隊成員。（以下為示例）</span> 50 <p>頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構文件中直接使用 app.wxss 51 中指定的樣式規則。index.json 是頁面的配置文件：頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 52 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。</p> 53 <h3>又一個小標題</h3> 54 <p> 55 頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。 56 </p> 57 </div> 58 </div> 59 </div> 60 </div> 61 62 <!-- 2 position --> 63 <h3 class="block top">第二種方法-position+margin</h3> 64 <div class="tips"> 65 <h4 class="tips-info">關鍵點</h4> 66 <ol> 67 <li>結構順序：左，中，右</li> 68 <li>position:absolute;之后的父元素塌陷</li> 69 </ol> 70 </div> 71 <div class="tips"> 72 <h4 class="tips-info">缺點</h4> 73 <ol> 74 <li>父元素設置固定高度，中間結構超出高度會溢出</li> 75 </ol> 76 </div> 77 <div class="browser"> 78 <div class="container p-cont"> 79 <div class="box team-box clearfix"> 80 <div class="img-box"> 81 <div class="img-txt">團隊logo 80x80</div> 82 </div> 83 <div class="team-name">團隊名稱</div> 84 </div> 85 <div class="box info-box"> 86 <div> 87 <h3>關於你們團隊的介紹</h3> 88 <span>可以給我們解釋一下團隊名稱得來歷，或是分別介紹你們的團隊成員。（以下為示例）</span> 89 <p>頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構文件中直接使用 app.wxss 90 中指定的樣式規則。index.json 是頁面的配置文件：頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 91 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。</p> 92 <h3>又一個小標題</h3> 93 <p> 94 頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。 95 </p> 96 </div> 97 </div> 98 <div class="box person-box clearfix"> 99 <div class="img-box"> 100 <div class="img-txt">個人logo 80x80</div> 101 </div> 102 <div class="img-box"> 103 <div class="img-txt">個人logo 80x80</div> 104 </div> 105 <div class="img-box"> 106 <div class="img-txt">個人logo 80x80</div> 107 </div> 108 <div class="img-box"> 109 <div class="img-txt">個人logo 80x80</div> 110 </div> 111 </div> 112 </div> 113 </div> 114 115 <!-- 3 display--> 116 <h3 class="block top">第三種方法--display：table-cell</h3> 117 <div class="tips"> 118 <h4 class="tips-info">關鍵點</h4> 119 <ol> 120 <li>結構順序：左，中，右</li> 121 <li>父元素display:table;</li> 122 <li>左右兩個子元素display：table-cell；vertical-align：center，中間盒子不用管。</li> 123 <li>左右兩個子元素加一個包裹，因為高度會盛滿父元素</li> 124 125 <li>display：table-cell；——不支持ie6,7</li> 126 </ol> 127 </div> 128 <div class="browser"> 129 <div class="container d-cont"> 130 <div class="cell"> 131 <div class="box team-box clearfix"> 132 <div class="img-box"> 133 <div class="img-txt">團隊logo 80x80</div> 134 </div> 135 <div class="team-name">團隊名稱</div> 136 </div> 137 </div> 138 <div class="box info-box"> 139 <div> 140 <h3>關於你們團隊的介紹</h3> 141 <span>可以給我們解釋一下團隊名稱得來歷，或是分別介紹你們的團隊成員。（以下為示例）</span> 142 <p>頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構文件中直接使用 app.wxss 143 中指定的樣式規則。index.json 是頁面的配置文件：頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 144 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。</p> 145 <h3>又一個小標題</h3> 146 <p> 147 頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。 148 </p> 149 </div> 150 </div> 151 <div class="cell"> 152 <div class="box person-box clearfix"> 153 <div class="img-box"> 154 <div class="img-txt">個人logo 80x80</div> 155 </div> 156 <div class="img-box"> 157 <div class="img-txt">個人logo 80x80</div> 158 </div> 159 <div class="img-box"> 160 <div class="img-txt">個人logo 80x80</div> 161 </div> 162 <div class="img-box"> 163 <div class="img-txt">個人logo 80x80</div> 164 </div> 165 </div> 166 </div> 167 </div> 168 </div> 169 <!-- 4 margin--> 170 <h3 class="block top">第4種方法--聖杯布局【margin負邊距布局】</h3> 171 <div class="tips"> 172 <h4 class="tips-info">關鍵點</h4> 173 <ol> 174 <li>結構上，中間盒模型在前面【重要】，左右兩邊的順序隨意，但最好是中，左，右的順序來。</li> 175 <li>三個模塊外邊都要加一個父元素-包裹用的div，這個父div的float：left；【三個都有左浮動】</li> 176 <li>中間盒模型margin-left、margin-right等於左右結構的寬度，</li> 177 <li>左邊父div的margin-left:-100%; 178 <span class="tips-ex">100%的來源，其實是中間盒模型的寬度.這里我中間沒設置寬度所以就是100%</span> 179 </li> 180 <li>右邊父div的margin-left:-盒子寬度px; 181 <span class="tips-ex">右邊只需要向左移動自己寬度的大小就能回到原位置。</span> 182 </li> 183 <li>最外邊清楚浮動</li> 184 </ol> 185 </div> 186 <div class="browser"> 187 <div class="container m-cont clearfix"> 188 <div class="m-c"> 189 <div class="box info-box"> 190 <div> 191 <h3>關於你們團隊的介紹</h3> 192 <span>可以給我們解釋一下團隊名稱得來歷，或是分別介紹你們的團隊成員。（以下為示例）</span> 193 <p>頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構文件中直接使用 app.wxss 194 中指定的樣式規則。index.json 是頁面的配置文件：頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 195 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。</p> 196 <h3>又一個小標題</h3> 197 <p> 198 頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。 199 </p> 200 </div> 201 </div> 202 </div> 203 <div class="m-l"> 204 <div class="box team-box clearfix"> 205 <div class="img-box"> 206 <div class="img-txt">團隊logo 80x80</div> 207 </div> 208 <div class="team-name">團隊名稱</div> 209 </div> 210 </div> 211 <div class="m-r"> 212 <div class="box person-box clearfix"> 213 <div class="img-box"> 214 <div class="img-txt">個人logo 80x80</div> 215 </div> 216 <div class="img-box"> 217 <div class="img-txt">個人logo 80x80</div> 218 </div> 219 <div class="img-box"> 220 <div class="img-txt">個人logo 80x80</div> 221 </div> 222 <div class="img-box"> 223 <div class="img-txt">個人logo 80x80</div> 224 </div> 225 </div> 226 </div> 227 </div> 228 </div> 229 <!-- 5 flex--> 230 <h3 class="block top">第5種方法--css3 flex</h3> 231 <div class="tips"> 232 <h4 class="tips-info">關鍵點</h4> 233 <ol> 234 <li>結構順序：左，中，右</li> 235 <li>三個盒子分別需要給一個div外包裹，好讓內部的實際內容高度自定義。因為用了flex和用了table-cell感覺一樣，高度會和父元素高度一致</li> 236 <li>三個盒子的父元素設置display：flex；</li> 237 <li>中間盒子設置flex： 1；讓他填充父元素剩下的地方.並根據需要設置邊距和左右隔開</li> 238 </ol> 239 </div> 240 <div class="browser bottom"> 241 <div class="container fx-cont"> 242 <div class="cell"> 243 <div class="box team-box clearfix"> 244 <div class="img-box"> 245 <div class="img-txt">團隊logo 80x80</div> 246 </div> 247 <div class="team-name">團隊名稱</div> 248 </div> 249 </div> 250 <div class="cell"> 251 <div class="box info-box"> 252 <div> 253 <h3>關於你們團隊的介紹</h3> 254 <span>可以給我們解釋一下團隊名稱得來歷，或是分別介紹你們的團隊成員。（以下為示例）</span> 255 <p>頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構文件中直接使用 app.wxss 256 中指定的樣式規則。index.json 是頁面的配置文件：頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 257 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。</p> 258 <h3>又一個小標題</h3> 259 <p> 260 頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。 261 </p> 262 </div> 263 </div> 264 </div> 265 <div class="cell"> 266 <div class="box person-box clearfix"> 267 <div class="img-box"> 268 <div class="img-txt">個人logo 80x80</div> 269 </div> 270 <div class="img-box"> 271 <div class="img-txt">個人logo 80x80</div> 272 </div> 273 <div class="img-box"> 274 <div class="img-txt">個人logo 80x80</div> 275 </div> 276 <div class="img-box"> 277 <div class="img-txt">個人logo 80x80</div> 278 </div> 279 </div> 280 </div> 281 </div> 282 </div> 283 </body> 284 285 </html>
1 /* 2 * @Author: @Guojufeng 3 * @Date: 2017-09-05 12:58:07 4 * @Last Modified by: @Guojufeng 5 * @Last Modified time: 2018-12-11 11:51:48 6 */ 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 html{ 12 font-family: "微軟雅黑"; 13 } 14 ul li{ 15 list-style: none; 16 } 17 a:link,a:hover{ 18 text-decoration: none; 19 } 20 .clearfix{ 21 *zoom:1; 22 } 23 .clearfix:after{ 24 height: 0; 25 clear: both; 26 content: ""; 27 visibility: hidden; 28 display: block; 29 } 30 .fl{ 31 float: left; 32 } 33 .fr{ 34 float: right; 35 } 36 h3,.tips-info{ 37 margin: 8px 0; 38 font-size: 14px; 39 } 40 li{ 41 margin-bottom: 10px 42 } 43 .tips,ol{ 44 background: #fffbfb; 45 padding: 10px 20px; 46 } 47 .tips-ex{ 48 font-size: 12px; 49 color: #99c1c1; 50 } 51 .block{ 52 padding: 10px 20px; 53 border-top: 5px solid #99c1c1; 54 margin: 30px 0 0px; 55 background: #f5f5f5; 56 } 57 .browser,.container{ 58 padding: 20px; 59 60 } 61 .container{ 62 font-size: 14px; 63 } 64 .container,.img-box{ 65 background: #eee; 66 border: 1px solid #999; 67 } 68 .box{ 69 background: #fff; 70 padding: 20px; 71 border: 1px solid #999; 72 } 73 .team-box{ 74 width: 158px; 75 } 76 .info-box{ 77 78 } 79 .person-box{ 80 width: 78px; 81 } 82 .person-box .img-box{ 83 margin-bottom: 20px; 84 } 85 .person-box .img-box:last-child{ 86 margin: 0; 87 } 88 .img-box{ 89 width: 78px; 90 } 91 .img-txt{ 92 line-height: 20px; 93 margin: 20px 0; 94 text-align: center; 95 padding: 0 5px; 96 } 97 .team-name{ 98 width: 78px; 99 height: 80px; 100 text-align: center; 101 } 102 /* others */ 103 .top{ 104 margin-top: 150px; 105 } 106 .bottom{ 107 margin-bottom: 150px; 108 } 109 110 /*不同*/ 111 .f-cont .team-box,.img-box,.team-name{ 112 float: left; 113 } 114 .f-cont .person-box{ 115 float: right; 116 } 117 .f-cont .info-box,.p-cont .info-box{ 118 margin: 0 140px 0 220px; 119 } 120 /*2*/ 121 .p-cont{ 122 position: relative; 123 height: 430px; 124 } 125 .p-cont .team-box,.p-cont .person-box{ 126 position: absolute; 127 top: 20px; 128 z-index: 9; 129 } 130 .p-cont .team-box{ 131 left: 20px; 132 } 133 .p-cont .person-box{ 134 right: 20px; 135 } 136 /*3*/ 137 .d-cont{ 138 display: table; 139 } 140 .d-cont .cell{ 141 display: table-cell; 142 vertical-align: top; 143 } 144 .d-cont .info-box{ 145 margin: 0 20px; 146 } 147 /*4*/ 148 .m-l,.m-c,.m-r{ 149 float: left; 150 } 151 .m-l{ 152 margin-left: -100%; 153 } 154 .m-c{ 155 margin: 0 140px 0 220px; 156 } 157 .m-r{ 158 margin-left: -120px; 159 } 160 /*5*/ 161 .fx-cont{ 162 display: -webkit-flex; 163 display: flex; 164 } 165 .fx-cont .info-box{ 166 flex: 1; 167 margin: 0 20px; 168 }
聲明：
請尊重博客園原創精神，轉載或使用圖片請注明：
博主：xing.org1^
出處：http://www.cnblogs.com/padding1015/