Div+Css布局方案选择float、relative+absolute、inline-block

提到网页布局，相信Div与Table之争已经基本Game Over了。凡是略懂web标准的设计师都不会再用Table去布局。Div+Css这种方式方便优雅之余在列布局方面却一直不是很简洁，到网上搜索网站布局，大部分都是本文所述的float方法，然而需要注意的是，这并不是唯一的解决方案。下面是我所了解到的分列布局的集中方案（当然不包括Table）。为了简化，我们用同样的html代码只列举css的不同。

Html代码：

<div class="container">
    <div class="left">
        左侧内容
    </div>
    <div class="right">
        右侧内容
    </div>
</div>

1、float方法，这是目前最主流的解决方案，其中float属性是核心，:after伪类代码主要是让父对象的高与子对象的高相等，所以这里不用指定父对象的高。代码示例：

 <style type="text/css">
    .left
    {
        float:left;
        width:100px;
        height:100px;
        background-color:red;
    } 
    .right
    {
        float:right:
        width:300px;
        height:100px;
        background-color:green;
    }
    .container:after
    {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .container
    {
        width:410px;
        zoom: 1;
    }
</style>

2、relative+absolute方法，很多国外的网站使用此方法，因为absolute的对象无法撑开父对象的高，所以要进行设置：

<style type="text/css">
    .left
    {
        position:absolute;
        left:0;
        width:100px;
        height:100px;
        background-color:red;
    } 
    .right
    {
        position:absolute;
        right:0;
        width:300px;
        height:100px;
        background-color:green;
    }
    .container
    {
        width:410px;
        position:relative;
        height:100px;
    }
</style>

3、inline-block方法，终极实现方法，最简洁合理的方法，目前仅Firefox3支持：

<style type="text/css">
    .left
    {
        display:inline-block;
        margin-right:10px;
        width:100px;
        height:100px;
        background-color:red;
    } 
    .right
    {
        display:inline-block;
        width:300px;
        height:100px;
        background-color:green;
    }
    .container
    {
        width:410px;
    }
</style>

这里说明一下，除了第三种没有完全实现之外，另外两种办法都有广泛的应用，当然可以在不同的特定条件下选择不同的方式，第一种设置通用性比较好，适用的范围比较光，缺点是代码啰嗦，并且在有些浏览器中会出现撑破、错位的情况。第二中方式不会错位，但只适用于固定高度的情况。其实，目前来讲这三种方式都无法实现几个子对象等高对齐，这是table的强项。具体运用哪一张方案还要看实际的情况，并且配合JS代码，基本都可以达到要求。最后贴一下运行效果（三种方式是一致的）