欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS兩列布局實(shí)現(xiàn)方式總結(jié)

theqwang'blog   發(fā)布時(shí)間：2016-06-02 11:47:16   作者：theqwang   我要評(píng)論
這篇文章主要介紹了CSS兩列布局實(shí)現(xiàn)方式總結(jié),討論了包括absolute + margin和float + margin方式的一些實(shí)踐和問(wèn)題,需要的朋友可以參考下

兩列布局大概是最經(jīng)典的一種網(wǎng)頁(yè)布局方式了，本博客就是采用的這種布局。兩列布局中，以主列(main)是自適應(yīng)寬度，子列(sidebar)是固定寬度的情形最為常見(jiàn)。
今天就來(lái)好好探討一下如何實(shí)現(xiàn)這種定寬+自適應(yīng)的兩列布局。

1. absolute + margin 方式

首先想到的是利用 absolute + margin 的方式實(shí)現(xiàn)。先看看代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="container">  
  2.     <div class="sidebar">子列</div>  
  3.     <div class="main">主列</div>  
  4. </div>  
CSS Code復(fù)制內(nèi)容到剪貼板
  1. .container {   
  2.  position: relative;   
  3. }   
  4. .sidebar {   
  5.  position: absolute;   
  6.  top: 0;   
  7.  left: 0;   
  8.  width: 200px;   
  9.  height: 300px;   
  10.  background-color: rgba(255, 0, 0, .5);   
  11. }   
  12. .main {   
  13.  height: 300px;   
  14.  margin-left: 210px;   
  15.  background-color: rgba(0, 255, 0, .5);   
  16. }  

該方式利用 position 讓 sidebar 列脫離文檔流，然后通過(guò) main 列的 margin-left 移除被 sidebar 列覆蓋的部分。如此，我們就實(shí)現(xiàn)了定寬 + 自適應(yīng)的兩列布局。

（1）列順序調(diào)整

在不修改 HTML 的情況下，只需簡(jiǎn)單修改 CSS，我們可以讓左右兩列順序互換，來(lái)看代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .sidebar {   
  2.  position: absolute;   
  3.  top: 0;   
  4.  rightright: 0;   
  5. }   
  6. .main {   
  7.  margin-right: 210px;   
  8. }   

（2）主內(nèi)容列優(yōu)先顯示

讓我們考慮的更完美一點(diǎn)，可不可以把 main 列放 sidebar 列 的前面，使主要內(nèi)容優(yōu)先加載渲染？ Let us try！

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="container">  
  2.     <div class="main">主列</div>  
  3.  <div class="sidebar">子列</div>  
  4. </div>  

做上面的簡(jiǎn)單調(diào)整即可，CSS不需要任何修改！

（3）問(wèn)題所在

雖然這種方式的優(yōu)點(diǎn)很多，但是卻存在一個(gè)致命缺點(diǎn)。因?yàn)?sidebar 列脫離了文檔流，當(dāng) sidebar 列比 main 列高時(shí)會(huì)覆蓋后面的布局：?jiǎn)栴}demo。
如果在 container 容器上 添加 overflow:hidden 就會(huì)使 sidebar 溢出部分被裁減。在這種布局方式下，這個(gè)問(wèn)題確實(shí)沒(méi)有有效的解決辦法。

2. float + margin 方式

然后想到的就是 float + margin 來(lái)實(shí)現(xiàn)兩列布局，首先實(shí)現(xiàn)左欄定寬，主內(nèi)容自適應(yīng)的兩欄布局。代碼如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="sidebar">子列</div>  
  2. <div class="main">主列</div>  
CSS Code復(fù)制內(nèi)容到剪貼板
  1. .sidebar {   
  2.  float: left;   
  3.  width: 200px;   
  4.  height: 300px;   
  5.  background-color: rgba(255, 0, 0, .5);   
  6. }   
  7. .main {   
  8.  height: 300px;   
  9.  margin-left: 210px;   
  10.  background-color: rgba(0, 255, 0, .5);   
  11. }  

這種實(shí)現(xiàn)方式比較簡(jiǎn)單，首先把子列浮動(dòng)到左邊，然后在主列上設(shè)置 margin-left 為子列留出顯示空間即可。

那么，這種方式支不支持調(diào)換列的位置呢？當(dāng)然可以。CSS代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .sidebar {   
  2.  float: rightright;   
  3.  width: 200px;   
  4.  height: 300px;   
  5.  background-color: rgba(255, 0, 0, .5);   
  6. }   
  7. .main {   
  8.  height: 300px;   
  9.  margin-right: 210px;   
  10.  background-color: rgba(0, 255, 0, .5);   
  11. }  

問(wèn)題所在：

看起來(lái) float + margin 方式是個(gè)好辦法，然而我們前面提到過(guò)的主列在前優(yōu)先顯示的優(yōu)化卻不能實(shí)現(xiàn)。

3. float + 負(fù)margin 方式

廢話不多說(shuō)，直接上代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="main-wrapper">  
  2.     <div class="main">主列</div>  
  3. </div>  
  4. <div class="sidebar">子列</div>  
CSS Code復(fù)制內(nèi)容到剪貼板
  1. .main-wrapper {   
  2.  float: left;   
  3.  width: 100%;   
  4. }   
  5. .main {   
  6.  height: 100px;   
  7.  margin-left: 210px;   
  8.  background-color: rgba(255, 0, 0, .5);   
  9. }   
  10. .sidebar {   
  11.  float: left;   
  12.  width: 200px;   
  13.  height: 100px;   
  14.  margin-left: -100%;   
  15.  background-color: rgba(0, 255, 0, .5);   
  16. }  

大家應(yīng)該都看出來(lái)了，這就是雙飛翼布局，主列優(yōu)先顯示。實(shí)現(xiàn)的過(guò)程如下：

首先浮動(dòng) main 列和 sidebar 列，然后通過(guò) 負(fù)margin 正確定位 sidebar 列。
把 main 列嵌套在一個(gè) div 里，該 div 的寬度值設(shè)為100%。
最后通過(guò)設(shè)置 main 列的 margin-left 消除被 sidebar 覆蓋的部分即可。

相關(guān)文章

最新評(píng)論