三列布局03-圣杯
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三列布局03-圣杯</title> <!-- 1.两边固定 当中自适应 2.当中列要完整显示 3.当中列要优先加载 --> <!-- 1. 浮动：搭建完整的布局框架 2. margin 为负值：调整旁边两列的位置（使三列布局到一行上） 3、使用相对定位：调整旁边两列的位置（使两列位置调整到两头） --> <style type="text/css"> * { margin: 0; padding: 0; } #content { padding: 0 200px; } #header,#footer{ height: 20px; text-align: center; border: 1px solid deeppink; background: gray; } #content .middle{ background: pink; 100%; float: left; } #content .left{ position: relative; left: -200px; margin-left: -100%; float: left; background: yellow; 200px; } #content .right{ position: relative; right: -200px; margin-left: -200px; float: left; background: yellow; 200px; } .clearfix{ *zoom:1; } .clearfix:after{ content: ""; display: block; clear: both; } </style> </head> <body> <div id="header">header</div> <div id="content" class="clearfix"> <div class="middle"> middle </div> <div class= "left"> left </div> <div class="right"> right </div> </div> <div id="footer">footer</div> </body> </html>