supce's blog

CSS学习笔记之三列页面布局（一）

发表于  |    |  

昨天做汇报没有抽出时间来更新，由于 gitcafe 被收购，又把 repository 做了迁移，正好换了一个主题，把原主题稍微修改了一下。感觉心情舒畅了好多 O(∩_∩)O哈！

一、结构分析

三列结构的页面布局一般用在一些门户网站上，比如：网易、搜狐和新浪等等。对三列结构进行分析，会发现三列的布局结构可以分成两种情况

1、两个两列布局结构组成

第一种三列结构可以看做是两个两列布局结构组合而成的，比如下面这段HTML代码：

<div id="header">头部信息</div>
<div id="container">
    <div class="wrap">
        <div class="mainBox">主要内容区域</div>
        <div class="subMainBox">次要内容区域</div>
    </div>
    <div class="sideBox">侧边栏</div>
</div>
<div id="footer">底部信息</div>

2、三个独立列组成

第二种三列结构就是由三个独立的列组成的。具体HTML代码如下：

<div id="header">头部信息</div>
<div id="container">    
    <div class="mainBox">主要内容区域</div>
    <div class="subMainBox">次要内容区域</div>
    <div class="sideBox">侧边栏</div>
</div>
<div id="footer">底部信息</div>

总之，这两种方式其实都是由两列布局拓展而来的。下面就开始根据不同的情况进行分析。

二、两列定宽中间自适应结构

在单列定宽单列自适应结构中，分别尝试了负边距和绝对定位的方式，最终也没有完全达到所需要的效果。在探讨两列定宽中间自适应之前，先了解下宽度值和浮动之间的关系。

1、宽度值和浮动之间的关系

盒模型宽度的默认值是auto，也就是浏览器窗口所能显示的大小。当盒模型具备了内外边距并且宽度为默认值auto时，盒模型的宽度大小适中保持在浏览器窗口所显示的范围，如下图所示：

当盒模型的宽度为默认值auto，同时盒子为float。盒模型的宽度不再等同于根据浏览器窗口所显示的大小，而是随着盒模型中的内容产生了变化。比如下面这个小demo：

<div style="background-color: #999;">
    我是浮动的，宽度值为auto</div>
<br/>
<div style="background-color: #888;">
    我是浮动的，宽度值为auto，但是我比你宽
</div>
<br/>
<div style="background-color: #777;">
    我是浮动的，宽度值为auto，但是我比你更宽宽宽宽宽宽宽宽
</div>

<style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        div{
            float: left;
            width: auto;
            margin-bottom: 10px;
        }
        br{
            clear: both;
        }
    </style>

效果如下图所示：

为了更好的理解宽度值和浮动之间的关系，下面看一个更为全面的例子，这里由于特殊情景，采用了不推荐使用的行内样式。

<div class="header">头部信息</div>
<hr />
<div style="width:auto;background-color:#999999;">width:auto;background-color:#999999;</div>
<hr />
<div style="width:auto;padding:0 200px;background-color:#EEEEEE;">width:auto;padding:0 200px;background-color:#EEEEEE;</div>
<hr />
<div style="width:auto;margin:0 100px;background-color:#999999;">width:auto;margin:0 100px;background-color:#999999;</div>
<hr />
<div style="width:auto;padding:0 200px;margin:0 100px;background-color:#EEEEEE;">width:auto;padding:0 200px;margin:0 100px;background-color:#EEEEEE;</div>
<hr />
<div style="float:left;width:auto;background-color:#999999;">float:left;width:auto;background-color:#999999;</div>
<hr />
<div style="float:left;width:auto;padding:0 200px;background-color:#EEEEEE;">float:left;width:auto;padding:0 200px;background-color:#EEEEEE;</div>
<hr />
<div style="float:left;width:auto;margin:0 100px;background-color:#999999;">float:left;width:auto;margin:0 100px;background-color:#999999;</div>
<hr />
<div style="float:left;width:auto;padding:0 200px;margin:0 100px;background-color:#EEEEEE;">float:left;width:auto;padding:0 200px;margin:0 100px;background-color:#EEEEEE;</div>
<hr />
<div class="footer">底部信息</div>

其他CSS代码如下:

<style type="text/css">
- {
    margin:0;
    padding:0;
    font-size:12px;
}
div {
    height:30px;
    line-height:30px;
}
hr {
    clear:both;
}
.header, .footer {
    height:50px;
    text-align:center;
    line-height:50px;
}
</style>

效果如下图：

通过上面几个例子已经彻底搞清楚了width和float之间的关系。下面就着手解决两列定宽中间自适应的问题。

2、利用宽度值和浮动解决

首先将HTML准备好

<div id="header">这里是头部信息</div>
<div id="container">
    <div class="mainBox">
        <div class="content">这里是主要内容区域</div>
    </div>
    <div class="subMainBox">
        <p>这里是次要内容区域</p>
        <p>这里有两行</p>
    </div>
    <div class="sideBox">
        <p>这里是侧边栏</p>
        <p>这里有三行</p>
        <p>这里有三行</p>
    </div>
</div>
<div id="footer">这里是底部信息</div>

在上面这段HTML代码中，主要内容区域是由两个div标签所包含的。主要思路是以mainBox的浮动并将其宽度设置为100%，配合content的默认宽度值与外边距所留的空白，利用负边距原理将次要内容区域和侧边栏吸到主要内容的两侧。

<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    #header,#footer{
        width: 100%;
        height: 30px;
        line-height: 30px;
        color: #FFF;
        background-color: #AAA;
        text-align: center;
    }
    #container{
        color: #FFF;
    }
    .mainBox{
        float: left;
        width: 100%;
    }
    .mainBox .content{
        background-color: #333;
        margin: 0 210px 0 310px;
    }
    .subMainBox{
        float: left;
        width: 300px;
        /*margin-left: -100%;*/
        background-color: #666;
    }
    .sideBox{
        float: left;
        width: 200px;
        /*margin-left: -200px;*/
        background-color: #666;
    }
    #footer{
        clear: both;
    }
</style>

由于mainBox的宽度值为100%，所以subMainBox和sideBox被挤到下面一行。如下图：

将CSS中的注释去掉，利用负边距就可以实现我们想要的效果，刷新页面，效果如下图：

到这里，突然灵光一闪，想起两列结构中单列定宽单列自适应也可以用这种方法解决。

3、利用该方式解决两列结构

上一篇文章中的方法都没有很好的解决我们的问题咕~~(╯﹏╰)b，下面用这个方法试试，首先是HTML代码：

div class="header">头部信息</div>
<div class="container">
    <div class="mainBox">
        <div class="content">主要内容区他宽一些他宽一些他宽一些他宽一些他宽一些他宽一些他宽一些他宽一些他宽一些他宽一些他宽一些他宽一些</div>
    </div>
    <div class="sideBox">
        侧边栏
        <p>加一些东西多一行</p><p>加一些东西多一行</p>
    </div>
</div>
<div class="footer">底部信息</div>

参照上面的方法，CSS代码如下：

<style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    .header, .footer {
        height:30px;
        line-height:30px;
        text-align:center;
        color:#FFFFFF;
        background-color:#AAAAAA;
    }
    .container {
        text-align:center;
        color:#FFFFFF;
    }
    .mainBox {
        float:left;
        width:100%;
        background-color:#FFFFFF;
    } 
    .mainBox .content {
        margin:0 210px 0 0;
        background-color:#000000;
    } 
    .sideBox {
        float:left;
        width:200px;
        margin-left:-200px;
        background-color:#666666;
    }
    .footer {
        clear:both;
    }
</style>

最终效果如下图所示：

以前挖的坑终于填了一个↖(^ω^)↗。

三、左侧定宽右侧及中间自适应结构

其实，左侧定宽右侧及中间自适应结构是在刚才的结构上拓展的。在原来HTML不变的基础上，只需简单修改CSS几个属性就可以实现了！

<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    #header,#footer{
        width: 100%;
        height: 30px;
        line-height: 30px;
        color: #FFF;
        background-color: #AAA;
        text-align: center;
    }
    #container{
        color: #FFF;
    }
    .mainBox{
        float: left;
        width: 100%;
    }
    .mainBox .content{
        background-color: #333;
        margin: 0 31% 0 210px;  /*modify*/
    }
    .subMainBox{
        float: left;
        width: 30%;  /*modify*/
        margin-left: -30%;  /*modify*/
        background-color: #666;
    }
    .sideBox{
        float: left;
        width: 200px;
        margin-left: -100%; /*modify*/
        background-color: #666;
    }
    #footer{
        clear: both;
    }
</style>

CSS的魅力就在于此！刷新下页面：

这篇blog就先到这里了（耳畔响起谷歌娘的声音是什么鬼？），更多关于三列的布局结构下一次在探讨和学习吧