CSS三列布局總結
阿新 • • 發佈：2019-01-09
三列布局就是左右兩欄定寬且不一定相等，中間一欄自適應。
假設我們要實現一個左邊固定200px，右邊固定300px，中間自適應的佈局。
有以下幾種方法：
1.聖盃佈局
這種方式的DOM順序一定要是middle在前，然後是left和right。
HTML程式碼如下：
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="3columns.css"/> </head> <body> <div class="container"> <div class="middle"> <p>middle</p> </div> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> </div> </div> </body> </html>
CSS程式碼如下：
html,body{ padding:0; margin:0; } .container{ padding-left:200px; padding-right:300px; } .left{ float:left; margin-left:-100%; position:relative; left:-200px; width:200px; height:300px; background-color: red; } .right{ float:left; margin-left:-300px; position:relative; right:-300px; width:300px; height:350px; background-color: blue; } .middle{ float:left; height:400px; width:100%; background-color: yellow; }
2.雙飛翼佈局
需要給中間部分加一個父容器
HTML程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="3columns.css"/> </head> <body> <div class="container"> <div class="middle-box"> <div class="middle"> <p>middle</p> </div> </div> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> </div> </div> </body> </html>
CSS程式碼：
html,body{
padding:0;
margin:0;
}
.left{
float:left;
margin-left:-100%;
width:200px;
height:300px;
background-color: red;
}
.right{
float:left;
margin-left:-300px;
width:300px;
height:350px;
background-color: blue;
}
.middle-box{
float:left;
height:400px;
background-color: yellow;
width:100%;
}
.middle{
margin-left:200px;
margin-right:300px;
}
3.彈性佈局
HTML程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="2columns.css"/>
</head>
<body>
<div class="container">
<div class="middle">
<p>middle</p>
</div>
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
</body>
</html>
CSS程式碼：
html,body{
padding:0;
margin:0;
}
.container{
display:flex;
}
.left{
order:1;
flex-basis:200px;
height:300px;
background-color: red;
}
.middle{
order:2;
flex:1;
height:400px;
background-color: yellow;
}
.right{
order:3;
flex-basis:300px;
height:350px;
background-color: blue;
}
4.絕對佈局
HTML中DOM順序隨意
CSS程式碼：
html,body{
padding:0;
margin:0;
}
.container{
position:relative;
}
.left{
position:absolute;
top:0;
left:0;
width:200px;
height:300px;
background-color: red;
}
.middle{
margin-left:200px;
margin-right: 300px;
height:400px;
background-color: yellow;
}
.right{
position:absolute;
top:0;
right:0;
width:300px;
height:350px;
background-color: blue;
}
