-
三列布局，中间宽度自适应，两边定宽；
-
中间栏要在浏览器中优先展示渲染；
-
允许任意列的高度最高；
1. 绝对定位
原理就是将左右两边的元素设置为绝对定位，中间的元素设置其左右的margin值为左右两个元素的宽度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三栏布局</title> <style> #container { position: relative; height: 500px; margin: 0 auto; background-color: gold; } .column { position: absolute; top: 0; height: 100%; } #center { margin: 0 150px 0 200px; background-color: hotpink; height: 100%; } #left { left: 0; width: 200px; background-color: royalblue; } #right { right: 0; width: 150px; background-color: blue; } </style> </head> <body> <div id="container"> <div id="center">center</div> <div id="left" class="column">left</div> <div id="right" class="column">right</div> </div> </body> </html>
2. 浮动+负边距
原理就是将三个元素都设置为左浮动，但是元素位置是中左右，然后分别设置左右的元素的宽度和边距，最后再在中间元素上加一个子元素，并将其左右边距设置成左右元素的宽度，这是最重要的一步，不然中元素会被左右元素盖住一部分。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三栏布局</title> <style type="text/css"> .container { min-width: 700px; } .middle { float: left; width: 100%; height: 300px; text-align: center; background-color: #ffd36a; } .sub { margin: 0 200px; } .left { float: left; width: 200px; height: 300px; margin-left: -100%; background-color: #ff63bd; } .right { float: left; width: 200px; height: 300px; margin-left: -200px; background-color: #a2ff95; } </style> </head> <body> <div class="container"> <div class="middle"> <div class="sub"> cjois hsheio ere fhwioefhoi wgwoigh wjw popjf fnoqi feribv ehfoih waidn howeidw efwheofhi qfqiwoh qfwbfwi fuiwe fgguwdhq fwebf weuhfw egifwiygw gwhow eifhnv whiohweowbvwe </div> </div> <div class="left"> <h3>left</h3> </div> <div class="right"> <h3>right</h3> </div> <div> </body> </html>
3. 浮动 + 超出隐藏
原理是分别将左右元素设置为浮动，因为设置为浮动回事元素脱离文档流，是父容器高度塌陷，而overflow：hidden可以清除浮动，所以可以在中元素中设置overflow:hidden来清除浮动，使三者显示在一行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三栏布局</title> <style> .container { min-width: 700px; height: 500px; } .left { float: left; width: 200px; background-color: violet; } .right { float: right; width: 200px; background-color: violet; } .middle { overflow: hidden; background-color: yellow; } </style> </head> <body> <div class="container"> <div class="left">left</div> <div class="right">right</div> <div class="middle">nvois hvsh ifho shfo fafiha foihafh aoifhi ogheiof ewhieofhw vni soehios hci ciosh hisohfos fsoief hsofhos hsiod fheiofh soifh dsofhid sfhis vd</div> </div> </body>
4. flex布局
原理是将父容器设置为display:flex 可以使子容器排在同一行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三栏布局</title> <style> .container { display: flex; } .left { flex: 0 0 100px; background-color: #f00; } .main { flex: 1; background-color: #0f0; } .right { flex: 0 0 200px; background-color: #00f; } </style> </head> <body> <div class="container"> <div class="left">左侧栏</div> <div class="center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates molestias consequatur facere aperiam distinctio debitis in voluptatum quas blanditiis culpa illo minus accusantium atque quaerat unde, architecto odit! Itaque, eos.</div> <div class="right">右侧栏</div> </div> </body> </html>
5. 网格布局
设置网格布局，并且设置grid-template-columns可以控制有几列，以及每列的宽度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三栏布局</title> <style> .container { display: grid; grid-template-columns: 100px auto 200px; } .left { background-color: #f00; } .right { background-color: #00f; } .main { background-color: #0f0; } </style> </head> <body> <div class="container"> <div class="left">左侧栏</div> <div class="center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis corporis, neque odio at, saepe unde officiis nesciunt deleniti quidem delectus necessitatibus reiciendis nulla. Praesentium voluptates, perspiciatis natus fuga dicta tempora!</div> <div class="right">右侧栏</div> </div> </body> </html>