【摘自HTML5与CSS3权威指南】
使用float或position时，元素的内容高度不一致，则有底部很难对齐的问题
解决方法：盒布局或多栏布局
一．盒布局和多栏布局的区别：
1.使用多栏布局时，各栏宽度必须是相等的，在指定每栏宽度时，也只能为所有栏指定统一的宽度，栏与栏之间的宽度不可能是不一样的。
2.使用多栏布局时，不可能具体指定什么栏中显示什么内容，因此比较适合使用在文章内容的时候，不适合用在由各元素组成的网页结构。
二．多栏布局
概念：将一个元素中的内容分为两栏或多栏显示，并且确保各栏中内容的底部对齐。
Div#div1{
width:40em;
-moz-column-count:2;
-webkit-column-count:2;
}
与float、position的区别：使用这两个属性时，只需单独设定每个元素的宽度即可，而使用多栏布局时需要设定元素中多个栏目相加后的总的宽度
//使用column-width属性单独设置每一栏的宽度而不设定元素的宽度
Div#container{
Width:42em;
}
Div#div1{
-moz-column-count:2;
-webkit-column-count:2;
-moz-column-width:20em;
-webkit-column-width:20em;
-moz-column-gap:2em;///设定多栏之间的间隔距离
-webkit-column-gap:2em;///设定多栏之间的间隔距离
-moz-column-rule:1px solid red;///在栏与栏之间的增加一条间隔线
-webkit-column-rule:2px solid red;///在栏与栏之间的增加一条间隔线
}
三．盒布局（弹性布局）
概念，用法，能够水平方向和垂直方向的排列，将容器中元素的宽度和高度指定为容器的宽度和高宽，能够使用box-pack属性及box-align属性将子元素放置在父元素中央。
例：三栏的横排内容，先在最外层的div使用box属性
#container{
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;
}
四．弹性盒布局
1.使用自适应窗口的弹性盒布局 box-flex（只对一个元素使用时，宽高会自动扩大）
2.使用 box-ordinal-group改变各元素的显示顺序
3.使用 box-orient指定多个元素的排列方向, vertical垂直, horizontal横向
#container{
display:-moz-box;
display:-webkit-box;
-moz-box-orient:vertical;///垂直方向排列
-webkit-box-orient:vertical;///垂直方向排列
}
#left{
/*width:200px;
padding:20px;*/
background-color:orange;
-moz-box-ordinal-group:3;
-webkit-box-ordinal-group:3;
}
#center{
-moz-box-flex:1; /*弹性盒布局自适应*/
-webkit-box-flex:1;/*弹性盒布局自适应*/
-moz-box-ordinal-group:1;
-webkit-box-ordinal-group:1;
/*padding:20px;*/
background-color:yellow;
}
#right{
/*width:200px;
padding:20px;*/
background-color:limegreen;
-moz-box-ordinal-group:2;
-webkit-box-ordinal-group:2;
}
#left, #center, #right{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
box-flex属性的值为空白区域的比例，对多个元素使用时，如果都等于1，则元素的值为空白区域的值除于各flex的值之和，即是所占的百分比。
五．指定水平方向和垂直方向的对齐方式
1.使用盒布局时，用box-pack属性及box-align属性来指定元素中的文字、图像及子元素水平方向或垂直方向的对齐方式。
属性值 排列方向 box-pack box-align
start h 左 顶
center h 中 中
end h 右 底
start v 顶 左
center v 中 中
end v 底 右
//示例：使文字左右居中、垂直居中
div{
display:-moz-box;
display:-webkit-box;
-moz-box-align:center;
-moz-box-align:center;
-moz-box-pack:center;
-webkit-box-pack:center;
width:300px;
height:200px;
}