二欄佈局以及三欄佈局
阿新 • • 發佈:2018-12-10
二欄佈局
1、利用 calc 計算寬度的方法。
.left { float: left; height: 50px; width: 200px; background-color: red; } .right { height: 50px; width: calc(100%-200px); background-color: blue; } <div class="contain"> <div class="left">左側定寬</div> <div class="right">右側自適應</div> </div>
2、利用 float 配合 margin 實現。
.left { float: left; height: 50px; width: 200px; background-color: red; } .right { height: 50px; margin-left: 200px; background-color: blue; } <div class="contain"> <div class="left">左側定寬</div> <div class="right">右側自適應</div> </div>
3、利用 float 配合 overflow 實現。
.left { float: left; height: 50px; width: 200px; background-color: red; } .right { height: 50px; background-color: blue; overflow: hidden; } <div class="contain"> <div class="left">左側定寬</div> <div class="right">右側自適應</div> </div>
4、利用flex實現。
.contain{
display: flex;
}
.left {
height: 50px;
width: 200px;
background-color: red;
}
.right {
height: 50px;
width: 100%;
background-color: blue;
}
<div class="contain">
<div class="left">左側定寬</div>
<div class="right">右側自適應</div>
</div>
三欄佈局
1、float-margin方法。
缺點:由於DOM結構限制左-右-中
,主要內容無法最先載入。高度中間高度超出且沒有margin的情況下會出問題(文字環繞):解決方案為清除浮動或建立BFC(實質也是清除浮動)。
.left {
float: left;
height: 200px;
width: 200px;
background-color: red;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
float: right;
}
.main {
margin-left: 200px;
margin-right: 200px;
height: 200px;
background-color: green;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
2、BFC規則
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
background-color: green;
height: 200px;
overflow: hidden;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
3. 聖盃佈局
.left {
float: left;
width: 100px;
height: 200px;
margin-left: -100%;
background-color: red;
/*如果container沒有margin-left就不用設定以下內容*/
position: relative;
left: -100px;
}
.right {
float: left;
width: 100px;
height: 200px;
margin-left: -100px;
background-color: yellow;
/*如果container沒有margin-right就不用設定以下內容*/
position: relative;
right: -100px;
}
.main {
float: left;
width: 100%;
height: 200px;
background-color: blue;
}
.container{
margin-left: 100px;
margin-right: 100px;
}
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
4. 雙飛翼佈局
.main {
float: left;
height: 200px;
width: 100%;
background-color: yellow;
}
.content {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background-color: green;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 100px;
height: 200px;
float: left;
margin-left: -200px;
background-color: blue;
}
<div class="container">
<div class="main">
<div class ="container"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
5、flex佈局
.container{
display: flex;
}
.main {
height: 200px;
width: 100%;
background-color: yellow;
}
.left {
height: 200px;
order: -1;
width: 100px;
background-color: red;
}
.right {
width: 100px;
height: 200px;
background-color: blue;
}
<div class="container">
<div class ="main">111</div>
<div class="left"></div>
<div class="right"></div>
</div>