所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。我们可以用浮动、定位以及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: 45px13 ????}14 ????.main>div{15 ????????float: left;16 ????}17 ????.main{18 ???????width: 100%;19 ???????background: yellow20 ????}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: -200px36 ????}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>css 圣杯布局三种方式
原文地址：https://www.cnblogs.com/hsgg/p/9736804.html