二列布局_左右固定_自己撐開父級塊
阿新 • • 發佈:2021-06-11
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>二列布局_左右固定_自己撐開父級塊</title> <style type="text/css"> .container{ width: 960px; margin: 0 auto; background-color: yellow; overflow: hidden; } .clear{ -ms-zoom: 1; } .clear:after{ content:''; display: block; clear: both; } .left{ width: 200px; height: 600px; background-color: #4169E1; float: left; } .right{ width: 750px; height: 600px; background-color: darkcyan; float: right; } </style> </head> <body> <h2>基本思路</h2> <ol> <li>要給左右2列新增一個父集區塊</li> <li>要給左右2個區塊設定一個浮動:left/right</li> <li>給父區塊新增一個after偽類讓子塊撐開父集</li> </ol> <!-- DOM --> <div class="container clear"> <div class="left">左側</div> <div class="right">右側</div> </div> </body> </html>