css常見布局之三列布局--雙飛翼布局和聖杯布局
阿新 • • 發佈：2019-05-10
class 100% ron 中間 flow 一行 自適應 聖杯布局 使用
首先兩者都是兩邊寬度固定，中間寬度自適應，並且中間盒子(主題內容)放在最前面，以便優先渲染。
實現方案：都使用浮動來實現。
聖杯布局實現如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>聖杯布局</title> <style> .box{ padding: 0 100px; height: 400px; } .center, .left, .right{ float: left; height: 100%; } .left, .right{ position: relative; } .center{ width: 100%; background: #333; } .left{ width: 100px; background: #f8f8f8; margin-left: -100%; /*為了使元素移到上一行，margin-left設置百分比是相對於父元素寬度的，這個寬度是不包括padding在內*/ left: -100px; } .right{ width: 100px; background: #ccc; margin-left: -100px; right: -100px; } </style> </head> <body> <div class="box"> <div class="center"></div> <div class="left"></div> <div class="right"></div> </div> </body> </html> 雙飛翼布局實現如下：css常見布局之三列布局--雙飛翼布局和聖杯布局