聖盃佈局：
- 是以兩邊寬度固定，中間寬度自適應的佈局；需要設置一個body的最小寬度，這樣在你縮小頁面的時候就不會亂了，這個min-width是left-width * 2 + right-width；
- 首先得是將三欄放在一個div(container)中，能夠通過overflow：hiden清除浮動，使之成爲一個BFC塊級，然後能夠不影響其他的佈局，相當於是將三欄都處於浮動狀態；
- 設置中間三欄向左浮動，且設置中間center的寬度爲100%，能夠自使用收縮；
- 需要設置padding和position，防止其文字遮攔；
- 代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>聖盃佈局2</title> </head> <style> * { padding: 0; margin: 0; } body { min-width: 600px; } header, footer { text-align: center; width: 100%; background-color: #fbd1d5; padding: 20px 0; } .container { padding: 0 200px 0 200px; overflow: hidden; text-align: center; } .center { width: 100%; height: 200px; float: left; background-color: #9da4ff; } .left { position: relative; margin-left: -100%; float: left; width: 200px; height: 200px; background-color: #f0e6c5; left: -200px; } .right { position: relative; margin-left: -200px; left: 200px; float: left; width: 200px; height: 200px; background-color: #f0e6c5; } </style> <body> <header>聖盃佈局</header> <div class="container"> <div class="center">center</div> <div class="left">left</div> <div class="right">right</div> </div> <footer>footer</footer> </body> </html>雙飛翼佈局：
![雙飛翼佈局]()
- 同樣是中間的寬度是自適應的，然後兩邊的寬度是固定的，和聖盃佈局的不同是，雙飛翼佈局是中間的自適應的那一欄是有div包裹的，通過margin來給left和right騰出位置；
- 首先需要先將body能夠設置最小的寬度，這樣纔不會出現位置的混亂。
- 代碼如下：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雙飛翼佈局</title> <style> * { padding: 0; margin: 0; } body { font-weight: bold; font-family: "Comic Sans MS"; min-width: 600px; } header, footer { text-align: center; width: 100%; background-color: #fbd1d5; padding: 20px 0; } .container { text-align: center; overflow: hidden; } .container > div { position: relative; float: left; height: 200px; } .center { width: 100%; background-color: cornflowerblue; } .main { height: 100%; margin: 0 200px; background-color: #f0e6c5; } .left { background-color: #f0a553; width: 200px; margin-left: -100%; } .right { background-color: #f0a553; width: 200px; margin-left: -200px; } </style> </head> <body> <header>雙飛翼佈局</header> <div class="container"> <div class="center"> <div class="main"> center </div> </div> <div class="left"> left </div> <div class="right"> right </div> </div> <footer>footer</footer> </body> </html>
Flex佈局 ：
- 同樣是中間自適應，兩邊的寬度是固定的，不過這個相對於前面的幾種簡單了很多；
![Flex佈局]()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三欄佈局-flex</title> <style> * { padding: 0; margin: 0; } body { font-weight: bold; font-family: "Comic Sans MS"; min-width: 600px; } header, footer { text-align: center; width: 100%; background-color: #fbd1d5; padding: 20px 0; } .container{ display: flex; } .center{ width: 100%; background-color: #d5f0d5; order: 2; height: 200px; } .left{ width: 200px; order: 1;/*順序，從小到大的縮放*/ flex-shrink: 0; height: 200px; background-color: #f0a553; } .right{ height: 200px; flex-shrink: 0;/*允許縮放，是否存在空間不足的縮放*/ width: 200px; order: 3; background-color: #f0a553; } </style> </head> <body> <header>Flex佈局</header> <div class="container"> <div class="center"> center </div> <div class="left"> left </div> <div class="right"> right </div> </div> <footer>Footer</footer> </body> </html>
table-cell佈局
- 是通過設置父級元素display：table-cell,這樣可以保持高度是一致的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table-cell佈局</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
font-weight: bold;
font-family: "Comic Sans MS";
min-width: 600px;
}
header, footer {
text-align: center;
width: 100%;
background-color: #fbd1d5;
padding: 20px 0;
}
.container {
overflow: hidden;
position: relative;
}
.container > div {
display: table-cell;
min-height: 300px;
height: 200px;
}
.center {
width: 100%;
background-color: #d5f0d5;
}
.left {
min-width: 200px;
width: 200px;
background-color: #f0f0ab;
}
.right {
width: 200px;
min-width: 200px;
background-color: #f0f0ab;
}
</style>
</head>
<body>
<header>Flex佈局</header>
<div class="container">
<div class="left">
left
</div>
<!--需要注意的是，用到table-cell佈局，需要將center放中間，按照順序放置-->
<div class="center">
center
</div>
<div class="right">
right
</div>
</div>
<footer>Footer</footer>
</body>
</html>
絕對定位佈局
讓left和right分別向左和向右浮動，設置position爲relative；同時設置center爲position爲absolute；這個的缺點是會使center的高度會隨left和right控制。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>絕對定位</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
font-weight: bold;
font-family: "Comic Sans MS";
min-width: 600px;
}
header, footer {
text-align: center;
width: 100%;
background-color: #fbd1d5;
padding: 20px 0;
}
.container {
overflow: hidden;
position: relative;
}
.center {
position: absolute;
left: 200px;
right: 200px;
width: 100%;
top: 0;
bottom: 0;
background-color: #d5f0d5;
}
.left {
height: 300px;
position: relative;
float: left;
width: 200px;
background-color: #f0f0ab;
}
.right {
height: 300px;
position: relative;
width: 200px;
float: right;
background-color: #f0f0ab;
}
</style>
</head>
<body>
<header>Flex佈局</header>
<div class="container">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</div>
<footer>Footer</footer>
</body>
</html>