1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>圣杯布局</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 .container { 15 /* 设置最小宽度400px */ 16 min-width: 400px; 17 height: 200px; 18 background-color: greenyellow; 19 /*上下为零,左右为200 */ 20 padding: 0 200px; 21 } 22 23 .left, 24 .right { 25 width: 200px; 26 height: 200px; 27 background-color: red; 28 /* 设置为左浮动 */ 29 float: left; 30 } 31 32 .main { 33 /* 中间内容也为左浮动,设置宽度为100% */ 34 width: 100%; 35 height: 200px; 36 background-color: blue; 37 float: left; 38 } 39 40 .left { 41 margin-left: -100%; 42 position: relative; 43 left: -200px; 44 } 45 46 .right { 47 margin-left: -200px; 48 position: relative; 49 right: -200px; 50 } 51 </style> 52 </head> 53 54 <body> 55 <!-- 三列布局 左右两栏固定宽度,中间部分自适应 56 中间部分要在浏览器中优先暂时渲染 57 圣杯布局手法: 58 1.设置元素的container 的位置 59 2.将主体部分的三个子元素都设置左浮动 60 3.设置main宽度100%,让其单独暂满一行 61 4.设置left和right 负的外边距 62 5.使用相对定位移动left 和right 63 64 65 --> 66 <div class="container"> 67 <div class="main">middle</div> 68 <div class="left">left</div> 69 <div class="right">right</div> 70 </div> 71 </body> 72 73 </html>
