三栏布局
三栏布局总结
三栏布局：左右固定，中间自适应 方案（flex、表格、浮动、绝对定位、网格）
flex 布局
外层div使用flex布局，中间自适应块使用flex：1,代码如下
<!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> * { margin: 0; padding: 0; } .left, .right, .center { min-height: 100px; } .wrapper { display: flex; } .left { background-color: red; width: 300px; } .center { background-color: orange; flex: 1; } .right { background-color: blue; width: 300px; } </style> </head> <body> <div class="wrapper"> <div class="left"></div> <div class="center"> <h1>flex布局解决方案</h1> <p>包裹这个3个块的父元素display: flex; 中间的元素flex: 1;</p> </div> <div class="right"></div> </div> </body> </html>
表格布局
<!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>表格布局</title> <style> * { margin: 0; padding: 0; } .wrapper { display: table; width: 100%; } .left, .right, .center { min-height: 100px; display: table-cell; } .left { width: 300px; background-color: red; } .center { background-color: orange; } .right { background-color: blue; width: 300px; } </style> </head> <body> <div class="wrapper"> <aside class="left"></aside> <main class="center"> <h1>表格布局</h1> <p>父元素display: table;并且宽度为100%</p> <p>每一个子元素display: table-cell; </p> <p>左右两侧添加宽度，中间不加宽度</p> </main> <aside class="right"></aside> </div> </body> </html>
浮动布局
<!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> * { padding: 0; margin: 0; } .left, .right, .center { min-height: 100px; } .left { background-color: red; width: 200px; float: left; } .right { background-color: blue; width: 200px; float: right; } .center { background-color: orange; width: 100%; } </style> </head> <body> <aside class="left"></aside> <aside class="right"></aside> <main class="center"> <h1>浮动解决方案</h1> <p>方法：left和right写在center前面，并且分别左右浮动；</p> <p> 中间的这个div因为是块级元素，所以在水平方向上按照他的包容块自动撑开。 </p> <p>简单，但是中心部分过长下面会溢出，然后文字就会跑到两边去。</p> </main> </body> </html>
绝对定位
<!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>绝对定位三栏布局</title> <style> * { margin: 0; padding: 0; } aside { position: absolute; width: 300px; min-height: 100px; } aside.left { left: 0; background-color: red; } aside.right { right: 0; background-color: blue; } main.center { position: absolute; left: 300px; right: 300px; background-color: orange; } </style> </head> <body> <aside class="left"></aside> <aside class="right"></aside> <main class="center"> <h1>绝对定位解决方案</h1> <p>左右区域分别postion：absolute，固定到左右两边</p> <p>中间区域postion：absolute；left：300px; right: 300px</p> <p>给总的宽度加一个min-width，不然缩小窗口会有毛病</p> </main> </body> </html>
网格布局
<!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>网格布局</title> <style> * { margin: 0; padding: 0; } /* 网格布局 */ .wrapper { display: grid; width: 100%; grid-template-columns: 300px 1fr 300px; } .left { background-color: red; } .center { background-color: orange; } .right { background-color: blue; } </style> </head> <body> <div class="wrapper"> <aside class="left"></aside> <main class="center"> <h1>网格布局</h1> </main> <aside class="right"></aside> </div> </body> </html>
