代码改变世界

自适应两栏布局的最简实现

2012-05-04 20:50  AndrewCja  阅读(2485)  评论(2编辑  收藏  举报

下载本示例代码

本实现一栏宽度固定,另一栏宽度随父元素宽度的变化而变化。代码极其简单。

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;}

效果如下图所示:

 

                图 1-1

本实现非常简洁,但有些负面问题需要提醒注意。

假设我们想实现如下效果:

                图 1-2

通常我们需要在浮动元素下面使用清除元素,代码是这样写的:

<div class="col_rigid"></div>
<div class="col_flexible">
  <div>
    <h3 class="fl">我左浮动</h3><class="fr" href="#">我右浮动</a>
    <div class="cl"></div>
  </div>
  <p>我是内容</p>
</div>

但意外的是代码没有像我们想要的方式工作,它的呈现效果如下:

 

                图 1-3

如图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><class="fr" href="#">我右浮动</a>
  </div>
  <p>我是内容</p>
</div>

PS:因为自适应宽度一栏不能使用清除浮动,所以该布局不能够用于页面的整体布局。关于页面的整体布局,请阅读我的另一篇文章:很酷的页面布局框架

 

好,大功告成,谢谢阅读!: )