CSS 常用经典布局 - 三栏布局-工具盒子

效果展示 {#效果展示}

原始效果 {#原始效果}

最终效果 {#最终效果}

原始代码 {#原始代码}

html 部分 {#html-部分}

|-------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 | hljs html < div class = "container" > < div class = "left" > left </ div > < div class = "center" > center </ div > < div class = "right" > right </ div > </ div > ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> HTML </div> </pre></td> </tr> ` |

css 部分 {#css-部分}

|------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | hljs css body { min-width : 630px ; margin : 0 ; } .left , .center , .right { height : 150px ; } .left { width : 100px ; background-color : #ffb5bf ; } .center { background-color : #94e8ff ; } .right { width : 200px ; background-color : #8990d5 ; } ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> CSS </div> </pre></td> </tr> ` |

实现方法 {#实现方法}

flex 布局 {#flex-布局}

grid 布局 {#grid-布局}

|-----------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 | hljs css .container { display : grid; grid-template-columns : 100px 1 fr 200px ; } ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> CSS </div> </pre></td> </tr> ` |

table 布局 {#table-布局}

|------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 | hljs css .container { width : 100% ; display : table; } .left , .center , .right { display : table-cell; } ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> CSS </div> </pre></td> </tr> ` |

定位布局 {#定位布局}

|---------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | hljs css .container { position : relative; } .left { position : absolute; left : 0 ; } .center { position : absolute; left : 100px ; right : 200px ; } .right { position : absolute; right : 0 ; } ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> CSS </div> </pre></td> </tr> ` |

浮动布局 {#浮动布局}

|-------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 | hljs html < div class = "container" > < div class = "left" > left </ div > < div class = "right" > right </ div > < div class = "center" > center </ div > </ div > ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> HTML </div> </pre></td> </tr> ` |

|---------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 | hljs css .container { overflow : hidden; } .left { float : left; } .right { float : right; } ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> CSS </div> </pre></td> </tr> ` |

圣杯布局 {#圣杯布局}

|-------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 | hljs html < div class = "container" > < div class = "center" > center </ div > < div class = "left" > left </ div > < div class = "right" > right </ div > </ div > ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> HTML </div> </pre></td> </tr> ` |

|---------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | hljs css .container { overflow : hidden; padding-left : 100px ; padding-right : 200px ; } .center , .left , .right { float : left; } .center { width : 100% ; } .left { position : relative; left : - 100px ; margin-left : - 100% ; } .right { position : relative; right : - 200px ; margin-left : - 200px ; } ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> CSS </div> </pre></td> </tr> ` |

双飞翼布局 {#双飞翼布局}

|-----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 | hljs html < div class = "container" > < div class = "center-container" > < div class = "center" > center </ div > </ div > < div class = "left" > left </ div > < div class = "right" > right </ div > </ div > ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> HTML </div> </pre></td> </tr> ` |

|------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | hljs css .container { overflow : hidden; } .center-container , .left , .right { float : left; } .center-container { width : 100% ; } .center-container .center { margin-left : 100px ; margin-right : 200px ; } .left { margin-left : - 100% ; } .right { margin-left : - 200px ; } ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> CSS </div> </pre></td> </tr> ` |