所謂的聖杯布局就是左右兩邊大小固定不變，中間寬度自適應。我們可以用浮動、定位以及flex這三種方式來實現
一般這種布局方式適用於各種移動端頂部搜索部分，這是最常見的，如京東手機版主頁面頂部搜索：
可以看到左邊有個菜單按鈕，中間是搜索框，右邊是登錄兩個文字，左右大小是固定的，而中間部分則是隨着手機屏幕尺寸的大小而自適應。
第一種方法 float實現：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 6 <title>Document</title> 7 <style type="text/css"> 8 *{ 9 margin: 0; 10 padding: 0; 11 color: black; 12 font-size: 45px 13 } 14 .main>div{ 15 float: left; 16 } 17 .main{ 18 width: 100%; 19 background: yellow 20 } 21 .center{ 22 background: red; 23 margin-left: 200px; 24 margin-right: -200px; 25 width: 100% 26 } 27 .left{ 28 background: pink ; 29 width: 200px; 30 margin-left: -100% 31 } 32 .right{ 33 background: blue ; 34 width: 200px; 35 margin-right: -200px 36 } 37 </style> 38 </head> 39 <body> 40 <div class="main"> 41 <div class="center">中間</div> 42 <div class="left">左邊</div> 43 <div class="right">右邊</div> 44 </div> 45 46 </body> 47 </html>
第二種 position實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
color: black;
font-size: 45px
}
.main div{
box-sizing: border-box;
}
.main{
width: 100%;
background: red;
position: relative;
padding-left: 200px;
padding-right: 200px;
}
.center{
width: 100%;
background: pink
}
.left{
background: yellow ;
width: 200px;
position: absolute;
left: 0;
top: 0;
}
.right{
background: blue ;
width: 200px;
position: absolute;
top: 0;
right:0
}
</style>
</head>
<body>
<div class="main">
<div class="center">z中間</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
</html>
第三種 flex實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;padding:0;
}
.container{
display: flex;
height: 100vh;
flex-direction: column;
}
header{
background: #000;
}
section{
flex:1;
background: pink;
display: flex;
}
footer{
background: #000;
}
.left{
background: red;
flex:0 0 100px;
}
.center{
flex:1;
background: blue;
}
.right{
flex:0 0 100px;
background: red;
}
</style>
</head>
<body>
<div class='container'>
<header>頭部</header>
<section>
<div class='left'>左</div>
<div class='center'>中</div>
<div class='right'>右</div>
</section>
<footer>底部</footer>
</div>
</body>
</html>