左右两列布局

转【css】两列宽度全屏自适应：一列宽度固定，一列宽度自适应

(2011-03-10 09:11:43)

标签：

　　这种布局，我以前想了很久，总是没有办法，采用这种布局的网站，典型就是：博客园、各种邮箱。但是，这种布局的实现方法很多，我看了163邮箱、QQ邮箱的DOM结构，发现，都是用table布局的，用一个table作为两列的容器，然后，使这个table的样式中设置：width:100%。这是关键，这样table就会占居整个水平方向，而后一列一个td，让一个td固定宽，则另一个td自动占满剩余宽度。这个办法我很久前就想到了。但是，我一直在想有没有用纯div+css的方式来完成这种布局。

　　今天心血来潮，用FireDebug查看了博客园的DOM结构。恍然大悟。实在太简单了。所以做了个实验，如上图，它对应的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
    <style type="text/css">
        html,body
        {
            margin:0;
            padding:0;
            }
        .top
        {
            background-color:red;
            border:solid 1px black;
            margin:0 0 5px 0;
            height:50px;
            }
        .sidebar
        {
            position:absolute;
            left:0;
            top:57px;
            width:205px;
            background-color:yellow;
            border:solid 1px black;
            border-left-width:0;
            height:50px;
            }
        .main
        {
            margin-left:210px;
            background-color:white;
            border:solid 1px black;
            height:50px;
            }
    </style>
</head>
<body>
    <form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcyMjlkZITNqJgs+RNs/eWQN1lAbSvpYZlMxqK029mQ2FXE73uH" />
</div>

    <div class="top">A(固定高度，宽度自适应)</div>
　　　　<div class="sidebar">B(高度任意，宽度为固定)</div>
　　　　<div class="main">C(高度任意，宽度为除开B之外的所有空间，自适应)</div>
    </form>
</body>
</html>

　　原理超简单，关键就是上面红色加粗部分，真是巧妙啊。以前怎么没想到这个办法呢？呵呵。

　　现在看来，适当地用一用absolute，还是可以起到意想不到的效果啊。

　　上面的代码事实上有改进的余地，如果要求B、C两列上端是平齐的，那么，可以在B、C外面再加一个div，这样，就不用计算B的top了。只填个0就是了。当然，这个容器div的position必须为：relative。另外，可能有的读者认为。为什么不用浮动的方式来实现，只需把B/C放入一个div，让它们两个都向左浮动，然后B定宽，则C因为是块盒子，自然会填充剩余的空间。很遗憾，这个想法太理想化了，事实上并非如此，因为浮动的原因，实际上C的宽度将会是0。另外，浮动在不同的浏览器上的效果不同。不大方便啊。

　　老实说，网上众多站点采用这种布局的不多，这种布局往往给人一种朴素大方的感觉。时代不同了，以前那种总是占居中间一部分的布局未必能适合所有情况了。