<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>圣杯布局</title> </head> <style> * { margin: 0; padding: 0; } .container { padding-left: 200px; padding-right: 150px; } .middle { width: 100%; height: 350px; background-color: palegreen; text-align: center; padding-top: 50px; float: left; } .left { width: 200px; height: 400px; background-color: green; margin-left: -100%; position: relative; right: 200px; text-align: center; line-height: 400px; float: left; } .right { width: 150px; height: 400px; text-align: center; line-height: 400px; background-color: pink; position: relative; margin-left: -150px; right: -150px; float: left; } </style> <body> <div class="container"> <div class="middle"> <h4>中间区域</h4> <p> 圣杯布局要求header和footer各自占领屏幕所有宽度，高度固定 中间的container是一个三栏布局 三栏布局两侧宽度固定不变，中间部分自动填充整个区域 中间部分的高度是三栏中最高的区域的高度 </p> </div> <div class="left">左边栏</div> <div class="right">右边栏</div> <div style="clear: both"></div> </div> <script> let a = `三个模块浮动布局，清除浮动，按道理都会从左到右排，但是宽度不够，所以会换行，利用margin-三个模块浮动布局，清除浮动，按道理都会从左到右排，但是宽度不够，所以会换行，利用margin-left负值，向左偏移，然后利用相对定位，继续向左偏移达到指定位置； 右侧也是负值，向左偏移，每偏移1%，相当于宽度减少1%，等宽度减为0，就不会换行，此时再利用相对定位进行右偏移。`; </script> </body> </html>