CSS兩列布局
阿新 • • 發佈：2018-03-07
bubuko 就會 class 設置 一個 AI tar 兩種 red
一、float浮動
兩列布局可以使用浮動來完成，左列設置左浮動，右列設置右浮動，或者向同一個方向浮動。
當元素使用了浮動之後，會對周圍的元素造成影響，那麽就需要清除浮動，通常使用兩種方法：
- 給受到影響的元素設置 clear:both，即清除元素兩側的浮動，也可以設置具體清除哪一側的浮動：clear:left 或 clear:right，但必須清楚的知道到底是哪一側需要清除浮動的影響。
- 給浮動的父容器設置寬度，或者為 100%，同時設置 overflow:hidden，溢出隱藏也可以達到清除浮動的效果。
1、寬度自適應的兩列布局
只需要將寬度按照百分比來設置，這樣當瀏覽器窗口調整時，內容會根據窗口的大小，按照百分比來自動調節內容的大小。
<style> .main-left{ width:30%; height:800px; background:red; float:left; } .main-right{ width:70%; height:800px; background:pink; float:right; } #footer{ clear:both; /*清除浮動，給受到影響的元素設置 clear*/ height:50px; background:gray; } </style> <body> <div class="main-left">左列</div> <div class="main-right">右列</div> <div id="footer">頁腳</div> </body>
2、固定寬度兩列布局
只需要把左右兩列包裹起來，也就是給他們增加一個父容器，然後固定父容器的寬度，父容器的寬度固定了，那麽這兩列就可以設置具體的像素寬度了，這樣就實現了固定寬度的兩列布局。
<style> #main{ /*清除浮動：給浮動的父容器設置寬度，同時設置 overflow:hidden*/ width:960px; margin:0 auto; overflow:hidden; } #main .main-left{ width:288px; height:800px; background:red; float:left; } #main .main-right{ width:672px; height:800px; background:pink; float:right; } #footer{ width:960px; height:50px; background:gray; margin:0 auto; } </style> <body> <div id="main"> <div class="main-left">左列</div> <div class="main-right">右列</div> </div> <div id="footer">頁腳</div> </body>
3、兩列居中自適應布局
只需要給定父容器的寬度，然後讓父容器水平居中。
<style> #main{ /*清除浮動：給浮動的父容器設置寬度，同時設置 overflow:hidden*/ width:80%; margin:0 auto; overflow:hidden; } #main .main-left{ width:20%; height:800px; background:red; float:left; } #main .main-right{ width:80%; height:800px; background:pink; float:right; } #footer{ width:80%; height:50px; background:gray; margin:0 auto; } </style> <body> <div id="main"> <div class="main-left">左列</div> <div class="main-right">右列</div> </div> <div id="footer">頁腳</div> </body>
二、position：absolute
<div class="content"> <div class="left"> <p>Hello</p> <p>I‘am left</p> </div> <div class="right"> <p>Hi</p> <p>I‘am right</p> </div> </div>
.content{ position: relative; width: 100%; height: 500px; border: 1px solid #000; } .left{ background:#fcc; width: 200px; position: absolute; } .right{ background: #f66; position: absolute; left: 210px; }
結果為：
但是右邊的div並沒有自適應，則需要加上下述代碼來達到自適應的效果：就是同時設置left和right的值
.right{ right:0; }
三、flex
flex布局本來就是設計來自適應的，只需要用上flex: 1;，就能讓.right分到.parent的寬度減去.left的寬度。
<div class="parent"> <div class="left"></div> <div class="right"></div> </div> <style> .parent{ display: flex; } .left{ margin-right: 20px; } .right{ flex: 1; } </style>
四、float+BFC
這個方法主要是應用到BFC的一個特性：
- 浮動元素的塊狀兄弟元素會無視浮動元素的位置，盡量占滿一整行，這樣該兄弟元素就會被浮動元素覆蓋。
- 若浮動元素的塊狀兄弟元素為BFC，則不會占滿一整行，而是根據浮動元素的寬度，占據該行剩下的寬度，避免與浮動元素重疊。
- 浮動元素與其塊狀BFC兄弟元素之間的margin可以生效，這將繼續減少兄弟元素的寬度。
<div class="parent"> <div class="left"></div> <div class="right"></div> </div> <style> .left{ float: left; width: 100px; margin-right: 20px; //形成20px的間隔 } .right{ overflow: hidden; //通過設置overflow: hidden來觸發BFC特性 } </style>
並不是一定要在.right上用overflow: hidden;，只要能觸發BFC就好了。
由於.right的寬度是自動計算的，不需要設置任何與.left寬度相關的css，因此.left的寬度可以不固定（由內容盒子決定）。
CSS兩列布局