常用布局的實現(兩列布局、三列適應布局,兩列等高適應布局等)
阿新 • • 發佈:2017-06-01
html 絕對定位 頁面優化 cnblogs ... con bold strong ack
兩列布局:左側定寬,右側自適應
方法一:利用float和負外邊距
<style> * { margin: 0; padding: 0; } .main,.sitebar { font: bolder 20px/300px; } .main { width: 100%; float: left; } .main .content { margin-left: 200px; background-color: red; } .sitebar { width: 200px; float: left; background-color: green; margin-left: -100%; } </style> <div class="main"> <div class="content"> 右側主體自適應區塊 </div> </div> <div class="sitebar"> 左側定寬200px區塊 </div>
- 優點:考慮了頁面優化,右側主內容區先加載,左側後加載。
- 缺點:多添加了一層div包裹。
方法二:利用外邊距
<style> * { margin: 0; padding: 0; } .sitebar { float: left; width: 200px; background-color: green; } .content { background-color: red; margin-left: 200px; } </style> <div class="sitebar"> 左側定寬200px區塊 </div> <div class="content"> 右側主體自適應區塊 </div>
- 優點:代碼簡潔,便於理解
- 缺點:不利於頁面優化,右側主內容區後加載
方法三:利用position
<style> * { margin: 0; padding: 0; } .sitebar { width: 200px; background-color: green; } .content { position: absolute; left: 200px; right: 0; top: 0; background-color: red; } </style> <div class="content"> 右側主體自適應區塊 </div> <div class="sitebar"> 左側定寬200px區塊 </div>
- 優點:考慮到了頁面優化,右側內容區先加載
- 缺點:目測沒有
上述三種方法兼容 IE7 以上,但在IE7下不設置高度時,會產生高度錯位bug。可通過設置父元素 font-size=0 ,再分別設置 子元素 font-size解決。
方法四:利用flex布局
<style> * { margin: 0; padding: 0; } .main { display: flex; } .content { flex: 1; background-color: red; } .sitebar { flex: 0 0 200px; order: -1; background-color: green; } </style> <div class="main"> <div class="content"> 右側主體自適應區塊 </div> <div class="sitebar"> 左側定寬200px區塊 </div>
- 優點:CSS3新布局方式,高大上
- 缺點:僅支持 IE11+
三列布局:左右定款,中間自適應。
方法一:使用負外邊距
<style> * { margin: 0; padding: 0; } .main,.left,.right { height: 300px; font: 20px/300px; color: #fff; text-align: center; } .main { width: 100%; float: left; } .main .content { margin: 0 300px 0 200px; background-color: black; } .left { width: 200px; float: left; margin-left: -100%; background-color: red; } .right { width: 300px; float: left; margin-left: -300px; background-color: blue; } </style> <div class="main"> <div class="content"> 中間主體區域寬度自適應 </div> </div> <div class="left"> 左側定寬200px </div> <div class="right"> 右側定寬300px </div>
- 優點:兼容IE7+,考慮到頁面優化,中間內容區先加載
- 缺點:多一層div嵌套,不易理解
方法二:使用絕對定位
<style> body { margin: 0px; } #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; height: 400px; width: 100px; position: absolute; top: 0px; left: 0px; } #center { background-color: #F2FDDB; border: 1px solid #A5CF3D; height: 400px; margin-right: 102px; margin-left: 102px; } #right { background-color: #FFE7F4; border: 1px solid #F9B3D5; height: 400px; width: 100px; position: absolute; top: 0px; right: 0px; } </style> <div id="center"> 中列 </div> <div id="left"> 左列 </div> <div id="right"> 右列 </div>
- 優點:代碼結構簡單,考慮到了頁面優化,中間內容去先加載
- 缺點:目測沒有
方法三:使用flex布局
<style> .HolyGrail-body { display: flex; flex: 1; } .HolyGrail-content { flex: 1; background-color: green; } .HolyGrail-nav, .HolyGrail-ads { /* 兩個邊欄的寬度設為12em */ flex: 0 0 200px; background-color: blue; } .HolyGrail-nav { /* 導航放到最左邊 */ order: -1; background-color: grey; } </style> <div class="HolyGrail-body"> <main class="HolyGrail-content"> ... </main> <nav class="HolyGrail-nav"> ... </nav> <aside class="HolyGrail-ads"> ... </aside> </div>
- 優點:高大上
- 缺點:僅支持IE11+
常用布局的實現(兩列布局、三列適應布局,兩列等高適應布局等)