在工作中底哥， 經(jīng)常需要使用到中間兩欄布局或者左右布局缩歪， 對(duì)最常見(jiàn)的五種布局方式（float, absolute, flex, table, 柵格布局）等研究以后吁朦， 發(fā)現(xiàn)float和absolute是比較常用和有效的布局方式吱晒。
-
float布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>layout</title> <style> html * { padding: 0; margin: 0; } .layout article div { min-height: 100px; } </style> </head> <body> <section class="layout float"> <article class="left-right-center"> <style media="screen"> .layout.float .left { float: left; width: 300px; background: red; } .layout.float .right{ float: right; width: 300px; background: blue; } .layout.float .center{ background: yellow; } </style> <div class="left"></div> <div class="right"></div> <div class="center"> <h1> 浮動(dòng)解決方案 </h1> 1. this is the center 1. this is the center 1. this is the center </div>center </article> </section> </body> </html>缺點(diǎn)： 中間高度如果溢出引颈， 會(huì)從左側(cè)開(kāi)始诵冒，造成布局問(wèn)題凯肋。 解決方案，需要?jiǎng)?chuàng)建一個(gè)BFC, 加上
overflow: hidden
-
flex布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .flex .left-right-center{ display: flex; direction: row; } .flex .left-right-center>div{ min-height: 100px; } .flex .left-right-center .left{ background: red; width: 300px; } .flex .left-right-center .right{ background: yellow; width: 300px; } .flex .left-right-center .center{ flex: 1; background: purple; } </style> </head> <body> <section class="flex"> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center"> 1111111 </div> </article> </section> </body> </html>
