紀錄多種實現CSS三欄佈局的方法
聖盃佈局
<div class="container">
<div class="left">Left</div>
<!-- 右欄部分要寫在中間內容之前。因爲如果右側元素在中間元素後面，由於浮動元素位置上不能高於（或平級）前面的非浮動元素，導致右側元素會下沉。 -->
<div class="right">Right</div>
<div class="main">Main</div>
</div>
<style>
body,html,.containerl{
height: 100%;
padding:0;
margin: 0;
}
/*左邊欄左浮動*/
.left{
float:left;
height:100%;
width:200px;
background:#333;
}
/*中間欄自適應*/
.main{
height:100%;
margin:0 200px;
background: red;
}
/*右邊欄右浮動*/
.right{
float:right;
height:100%;
width:200px;
background:#333;
}
</style>
// 優點：快捷 簡單 兼容性較好
// 缺點: 有侷限性 脫離文檔流 需要清除浮動等
-
父容器使用margin，左中右元素均浮動，利用定位和margin移動到正確位置。
<style>
.w {
/* margin-left對應左邊元素l的寬度，margin-right對應右邊元素r的寬度 */
margin-left: 400px;
margin-right: 400px;
}
.left, .center, .right {
height: 600px;
float: left;
}
.left {
width: 400px;
background-color: aqua;
position: relative;
/* 爲了讓l元素從當前行移動到第一行同一位置*/
margin-left: -100%;
/* 移動到中間元素左側正確位置 */
left: -400px;
}
.center {
width: 100%;
background-color: blueviolet;
}
.right {
width: 400px;
background-color: brown;
position: relative;
/* 爲了讓l元素從當前行移動到上一行*/
margin-left: -400px;
right: -400px;
}
</style>
<body>
<div class="w">
<div class="center">自適應</div>
<div class="left">定寬</div>
<div class="right">定寬</div>
</div>
</body>
雙飛翼佈局
-
兩側寬度固定，中間寬度自適應的三列布局（中間元素內部增加子元素用於放置內容）
<style>
.left, .center, .right {
height: 600px;
float: left;
}
.left {
width: 400px;
background-color: aqua;
/* 爲了讓l元素從當前行移動到第一行同一位置*/
margin-left: -100%;
}
.center {
width: 100%;
background-color: blue;
}
.i {
height: 600px;
background-color: blueviolet;
margin-left: 400px;
margin-right: 400px;
}
.right {
width: 400px;
background-color: brown;
/* 爲了讓r元素移動到第一行*/
margin-left: -400px;
}
</style>
<body>
<div class="center">
<div class="i">自適應</div>
</div>
<div class="left">定寬</div>
<div class="right">定寬</div>
</body>
flex（彈性盒子佈局）
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
<style>
body,html{
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.container{
display: flex;
}
.left{
width:200px;
background: red;
}
.main{
flex: 1;
background: blue;
}
.right{
width:200px;
background: red;
}
</style>
// 優點：比較完美 移動端首選
// 缺點: 不兼容 ie9 及以下
Grid(網格佈局)
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
<style>
body,html{
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.container{
display: grid;
width: 100%;
grid-template-rows: 100px; /*設置行高*/
grid-template-columns: 200px auto 200px; /*設置列數屬性*/
}
.left{
background: red;
}
.main{
background: blue;
}
.right{
background:red;
}
</style>
// 優點：簡單強大 解決二維佈局問題
// 缺點: 不兼容 ie9 及以下
