-
用兩種不同的方法來實現一個兩列布局，其中左側部分寬度固定、右側部分寬度隨瀏覽器寬度的變化而自適應變化
![示例]()
-
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } .div-a{ background-color: #ccf; float:left; width: 200px; } .div-b{ background-color: #ee7700;/*右側和下側什麼也不用寫*/ } .div-c{ background-color: #99FF99; } </style> </head> <body> <div class="div-a">左側部分寬度固定</div> <div class="div-b">右側部分寬度隨瀏覽器寬度的變化而自適應變化</div> <div class="div-c">這裏是下半部分</div> </body> </html>
以上這個佈局有問題：原因在於：浮動 - 浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止。
- 由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
- 那麼按理說div-a浮動後，不佔文檔流中的位置，div-b應該被遮蓋，是這樣嗎？
- 答案是：yes
- 調整了一下代碼，換了半透明背景
- 方法一：使用float浮動，自適應div只需調整margin
注意結尾清除浮動<span style="color:#333333;"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" name="第一種"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } .div-a{ background-color: rgba(255,255,255,0.5); float:left; width: 200px; } .div-b{ background-color: rgba(249,38,114,0.5);/*爲什麼文字還看得見*/ </span><span style="color:#ff6666;">/*margin-left: 200px;*//*正確答案需要加上*/</span><span style="color:#333333;"> } .div-c{ background-color: #99FF99; </span><span style="color:#ff0000;">clear: both;</span><span style="color:#333333;"> } </style> </head> <body> <div id="content"> <div class="div-a">左側部分寬度固定</div> <div class="div-b">右側部分寬度隨瀏覽器寬度的變化而自適應變化</div> <div class="div-c">這裏是下半部分</div> </div> </body> </html></span>
結果發現：div-b不加<span style="color:#ff6666;">margin-left: 200px;</span>- div-a設置的白色半透明背景，變了顏色，說明div-a其實已經遮擋了div-b的一部分
- 所以給div-b加上margin-left是個明智的選擇
- 但是，又有個疑問，既然不加margin-left:200px的div-b被遮蓋了部分背景，爲何文字卻能正常的顯示出來，而不是重疊在div-a文字那裏？？
- 方法二：絕對定位，自適應的div只需調整margin
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" name="第一種"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } .div-a{ background-color: #ccf; position: absolute; left: 0; width: 200px; top:0; } .div-b{ background-color: #ee7700;/*左側頂寬 右側自適應*/ margin-left: 200px; } .div-c{ background-color: #99FF99; } </style> </head> <body> <div class="div-a">左側部分寬度固定</div> <div class="div-b">右側部分寬度隨瀏覽器寬度的變化而自適應變化</div> <div class="div-c">這裏是下半部分</div> </body> </html>
兩種不同的方法來實現一個兩列布局
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章