【摘自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;
}