css三列布局(两边固定中间自适应)
1.flex布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { width: 100%; height: 100px; display: flex; } #left, #right { width: 200px; height: 100px; background-color: #999; } #center { flex: 1; height: 100px; background-color: #f00; } </style> </head> <body> <div id="box"> <div id="left">left</div> <div id="center">center</div> <div id="right">right</div> </div> </body> </html>
2.利用float
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .left, .right { width: 200px; height: 200px; background-color: #999; } .left { float: left; } .right { float: right; } .center { margin: 0 200px; height: 200px; background-color: #f00; } </style> </head> <body> <!--该布局法的好处是受外界影响小，但是不足是 三个元素的顺序，center一定要放在最后，这是 和绝对定位不一样的地方，center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。 当浏览器窗口很小的时候，右边元素会被击倒下一行。--> <div class="left">left</div> <div class="right">right</div> <div class="center">center</div> </body> </html>
3.利用绝对定位(两侧)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css三列布局</title> <style type="text/css"> /*左右固定，中间自适应 利用绝对定位*/ .container { width: 100%; height: 100%; position: relative; } .left { position: absolute; left: 0; top: 0; width: 400px; height: 200px; background-color: black; color: #fff; } .center { /*width: auto;*/ /*如果没有这一句，那么，center这个div的文字就不会自动换行*/ margin: 0 400px; height: 200px; background-color: yellow; } .right { position: absolute; top: 0; right: 0; width: 400px; height: 200px; background-color: red; } </style> </head> <body> <div class="container"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div> </body> </html>
4.利用calc计算中间的div(不推荐)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .container { overflow: hidden; } .left, .right { float: left; width: 100px; background: red; } .center { float: left; width: calc(100% - 200px); background: yellow; } </style> </head> <body> <div class="container"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div> </body> </html>
5.双飞翼布局
主要利用float和margin-left
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { min-width: 550px; } .col { float: left; } #main { width: 100%; height: 200px; background-color: #ccc; } #main-wrap { margin: 0 200px; /*这是圣杯和双飞翼最明显的区别，在main内部使用的是margin，而圣杯是直接在container部分使用padding*/ } #left, #right { width: 200px; height: 200px; background-color: #0000FF; } #left { margin-left: -100%; } #right { margin-left: -200px; background-color: #FF0000; } </style> </head> <body> <div id="container"> <div id="main" class="col"> <div id="main-wrap"> #main </div> </div> <div id="left" class="col">#left</div> <div id="right" class="col">#right</div> </div> </body> </html>
6.圣杯布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .wrapper { padding: 0 100px; overflow: hidden; } .col { position: relative; float: left; } .main { width: 100%; height: 200px; background: yellow; } .left, .right { width: 100px; height: 200px; background: red; } .left { margin-left: -100%; left: -100px; } .right { margin-left: -100px; right: -100px; } </style> </head> <body> <section class="wrapper"> <section class="col main">main</section> <aside class="col left">left</aside> <aside class="col right">right</aside> </section> </body> </html>
圣杯布局和双飞翼的区别：
圣杯布局是整体使用了一个container（上例的wrapper），将三列放入其中，left和right占据的是wrapper的padding-left和 padding-right(上例第八行padding:0 100px;)。
双飞翼布局是在center部分多加了一个节点元素，left和right部分的位置在main-wrap的margin（magin-left和margin-right）部分。
