css自適應左右兩樣布局實現

執行個體

代碼如下

複製代碼

<style type="text/css"> body,div,h3,p{margin:0;padding:0;} .fl{float:left;display:inline;} .fr{float:right;display:inline;} .cl{clear:both;} .container{width:250px;margin:60px auto 0;} .col_rigid{width:62px;height:62px;float:left;background:url('gh.png');} .col_flexible{margin-left:72px;} </style> 下面為主體部份 <div class="container">  <div class="col_rigid"></div>  <div class="col_flexible">右邊寬度自適應，修改container的width值試試。</div> </div> <div class="container">  <div class="col_rigid"></div>  <div class="col_flexible">   <div>    <h3 class="fl">我左浮動</h3><a class="fr" href="#">我右浮動</a>    <div class="cl"></div>   </div>   <p>我是內容</p>  </div> </div>

Html代碼只是兩個div：

代碼如下	複製代碼
<div class="col_rigid"></div> <div class="col_flexible"></div>

Css代碼就兩個class：

代碼如下	複製代碼
.col_rigid{width:62px;height:62px; } .col_flexible{margin-left:72px;}

效果如下圖所示：

本實現非常簡潔，但有些負面問題需要提醒注意。

假設我們想實現如下效果：

 

通常我們需要在浮動元素下面使用清除元素，代碼是這樣寫的：

 

代碼如下	複製代碼
<div class="col_rigid"></div> <div class="col_flexible">   <div>     <h3 class="fl">我左浮動</h3><a class="fr" href="#">我右浮動</a>     <div class="cl"></div>   </div>   <p>我是內容</p> </div>

但意外的是代碼沒有像我們想要的方式工作，它的呈現效果如下：
 

如圖1-3，實際的結果是右欄中浮動元素後面的內容被清除到了左欄底邊之下，致使右欄中浮動元素之後出現一大片空白。說明一下，這可不是IE或者某種瀏覽器的bug，而是html標準就是這樣的。具體請見我翻譯的文章清除浮動的新方法。

就是說在右欄中我們不能使用清除浮動了，那麼怎麼才能實現我們想要的圖1-2的效果呢？可以通過在右欄的浮動行div元素上固定高度來實現。代碼如下：

代碼如下	複製代碼
<div class="col_rigid"></div> <div class="col_flexible">   <div style="height:30px;">     <h3 class="fl">我左浮動</h3><a class="fr" href="#">我右浮動</a>   </div>   <p>我是內容</p> </div>

總結:在自適應左右時我們只要把div的display修改為display:inline;這樣我們再利用float:left和rigth來左右浮動，這樣只要寬度不越出父容器寬度就可以實現自適應兩欄布局了。