兩列布局

1、常見的兩列布局

如百度搜索結果頁面，兩列固定寬度，高度自適應。

 博客園文章內容頁面和上邊的結構相似。

2、實現兩列布局步驟

1）應用浮動

 CSS以下

*{margin:0;padding:0;}
#header,#footer{width:960px; height:40px; background-color:#f0f0f0; margin:0 auto;}
#drapper{ width:960px;  margin:10px auto;}
 
.mainBox{float:left; width:680px;  background-color:red;}
.sidebar{float:right; width:270px;background-color:red;}

　　咱們的html結構通常是這樣的

<div id="header">header</div>
<div id="drapper">
<div class="mainBox">
下午在創新工場聽賴曉寧的分享，他說到 O2O 這個領域，若是你只是作簡單的線上引流到線下，是沒有多少機會的，能賺個 一、2 年錢不錯了。真正重要的，是徹底拆解掉線下的利益鏈條，按你的邏輯從新組裝起來，這樣纔有壁壘。
</div>
<div class="sidebar">想革傳統行業的命？你得先拆解開原有鏈條，再重構新格局</div>
<div style="clear:both;"></div>
</div>


<div id="footer">footer</div>

 

　　

如今樣式中浮動的div是沒有設置高度的，設置左浮動的div高度爲50pxj後,內容超出高度會發生什麼？

所以，浮動的div最好不要固定高度，或者固定高度後，添加overflow:hidden;

2）高度自適應

高度自適應就是不設置高度，或者height:auto;

3）清楚浮動

百度搜索或者博客園內容頁都是在浮動div後邊添加了一個多餘的div標籤。通常清楚浮動能夠處理。

有人就說了，直接將footer加clear:both;不是也能夠嗎？

仔細看仍是有區別的，只給footer加浮動浮動，div的容器drapper設置的外邊距不起做用了。

3、一列固定寬度，一列自適應

一列固定必須使用固定寬度px，自適應的話使用%來控制寬度，好比sidebar 200px,mainBox70%，可是若是將瀏覽器可視區域縮小，則sidebar又擠到下邊了。最好用width:auto或者100%而且配合負margin，此時也有問題當窗口減少，sidebar內容和mainBox出現內容重疊的狀況。此時能夠用定位方式來解決該問題。修改後的css以下

*{margin:0;padding:0;}
#header,#footer{width:auto; height:40px; background-color:#f0f0f0; margin:0 auto;}
#drapper{ width:auto;  margin:10px auto; position:relative;}

.mainBox{float:left; width:auto; background-color:red; margin-right:275px;}
.sidebar{float:right; width:270px;background-color:red; position:absolute;top:0px;right:0px;}

 其中mainBox和sidebar的float能夠去掉，可視窗口變化後的顯示效果

4、兩列寬度自適應

這種佈局方式，直接給浮動的div分配必定的寬度比例便可，如mainBox 70%，sidebar 28%。隨着視窗的改變，兩列一直按照比例進行顯示，不會出現重疊或者一方被」擠到下方」的狀況。