css自我調整左右兩樣佈局實現

文章介紹一了個的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來左右浮動，這樣只要寬度不越出父容器寬度就可以實現自我調整兩欄佈局了。