css那些事-页面布局2

作者：gcbeen

日期：2013年09月25日

一、三列的结构

两个两列布局结构组合成三列。

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

单独的三列布局结构。

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

二、单独三列两列定宽，中间自适应结构。

宽度auto与浮动的关系。

宽度auto占据浏览器框口一行中所有位置。
浮动 + 宽度auto 根据容器内容确定占据浏览器窗口的大小。

    * {
      margin: 0;
      padding: 0;
    }
    .header,
    footer {
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #FFF;
      background-color: #AAA;
    }
    .container {
      text-align: center;
      color: #FFF;
    }
    .mainBox {
      float: left;
      width: 100%; //站满一行
      background-color: #FFF;
    }
    .mainBox .content {
      margin: 0 210px 0 310px;
      background-color: #000;
    }
    .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;
    }

ps:float

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

右侧定宽左侧及中间自适应

    .mainBox .content {
      margin: 0 210px 0 41%;
      background-color: #000;
    }
    .subMainBox {
      float: left;
      width: 40%;
      margin-left: -100%;
      background-color: #666;
    }

交换左右侧

    .mainBox .content {
      margin: 0 41% 0 210px;
      background-color: #000;
    }
    .subMainBox {
      float: left;
      width: 40%;
      margin-left: -40%;
      background-color: #666;
    }
    .sideBox {
      float: left;
      width: 200px;
      margin-left: -100%
      background-color: #666;
    }

四、三列宽度自适应结构

    .mainBox .content {
      margin: 0 21% 0 41%;
      background-color: #000;
    }
    .subMainBox {
      float: left;
      width: 40%;
      margin-left: -100%;
      background-color: #666;
    }
    .sideBox {
      float: left;
      width: 20%;
      margin-left: -20%;
      background-color: #666;
    }

四、三列等高

背景模拟

    .container {
      float: left;
      width: 960px;
      text-align: center;
      color: #FFF;
      background: url(images/bg.png) repeat-y 0 0;
    }

负边距实现

    .container {
      float: left;
      width: 960px;
      text-align: center;
      overflow: hidden;
      color: #FFF;
    }
    
    margin-bottom: -9999px;
    padding-bottom: 9999px;

边框模拟

    .container {
      position: relative;
      width: 960px;
      color: #FFF;
    }

    .mainBox .content {
      border-left: 310px solid #999;
      border-right: 210px solid #333;
      background-color: #000;
    }
    .subMainBox {
      position: absolute;
      top: 0;
      left: 0;
      width: 300px;
    }
    sideBox {
      position: absolute;
      top: 0;
      right: 0;
      width: 200px;
    }

其他 javascript 实现

    <body onload="equalColumns('subMainBox', 'm_content', 'sideBox');">
      ...
    </body>

css 7