css3 - 盒布局

兼容性：Safari、Chrome、Firefox等主流浏览器支持。

使用盒布局来解决左右两栏或者多栏中底部不能对齐的问题。
在css3中，通过使用box属性来使用盒布局，使左右两栏或多栏中的div元素的底部对齐；
在Firefox中使用“-moz-box”；在Chrome、Safari中使用“-webkit-box”属性；

例如：

html：

<div id="container">
    <div id="left">
      <h2>左侧边栏</h2>
      <ul>
        <li><a href="#">超链接</a></li>
        <li><a href="#">超链接</a></li>
        <li><a href="#">超链接</a></li>
        <li><a href="#">超链接</a></li>
        <li><a href="#">超链接</a></li>
      </ul>
    </div>
    <div id="center">
      <h2>内容</h2>
      <p>我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容</p>
    </div>
    <div id="right">
      <h2>右侧边栏</h2>
      <ul>
        <li><a href="#">超链接</a></li>
        <li><a href="#">超链接</a></li>
        <li><a href="#">超链接</a></li>
      </ul>
    </div>
</div>

css：

<style>
    #container {  /* 最外层的盒子使用了box属性 */
      display: -moz-box;
      display: -webkit-box;
    }
    #left {
      width: 200px;
      padding: 20px;
      background-color: orange;
    }
    #center {
      width: 300px;
      padding: 20px;
      background-color: yellow;
    }
    #right {
      width: 200px;
      padding: 20px;
      background-color: limegreen;
    }
    #left,#center,#right {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
    }
</style>

解析：
多栏布局与盒布局的区别：使用多栏布局时，各栏宽度必须是相等的，在指定每栏宽度时，也只能为所有栏指定一个统一的宽度，栏与栏之间的宽度不可能是不一样的。另外，使用多栏布局时，也不可能具体指定什么栏中显示什么内容，因此比较适合使用在显示文章内容的时候，不适合用于安排整个网页中由各元素组成的网页设计时。