1 .Bootstrap 中可以引用 row 属性确定元素属于通一行,确定每个元素大小以及偏移量
Title2. CSS3 新增的多列布局
Title.multi_column {
-webkit-column-count: 3; // 表示布局几列
-webkit-column-rule: 1 px solid #bbb; //表示列与列之间的间隔条的样式
-webkit-column-gap: 2 em; // 表示列于列之间的间隔
}
3. position: absolute 绝对定位法
Titleh3{height: 100px;margin:20px 0 0;}
#left,#right{width: 200px;height: 100px; background-color: yellow;position: absolute;}
#left{left:2px;}
#right{right: 2px;}
#center{margin:2px 500px ;background-color: red;height: 100px; }
4. float 属性
Title#left,#right{ width: 200px;height: 200px; background-color: yellow }
#left {float: left;}
#right{float: right;}
#center{margin: 0 210px;height: 200px; background-color: red}
5. CSS3 的盒模型
Title#box{width:100%;display: flex; height: 100px;margin: 10px;}
#left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: yellow}
#center_box{ flex:1; height: 100px;margin: 10px; background-color: red}
6. display:inline-block
Title.parent{font-size: 0px;}
.left,.right,.center{display:inline-block; vertical-align: top;font-size: 16px;}/*把元素的顶端与行中最高元素的顶端对齐*/
.left,.right{width: 100px;}
.center{width: calc(100% - 300px); margin: 0 20px;}
7. display:table-cell
Titlep{margin: 0;}
.parent{display: table; width: 100%;table-layout: fixed;}
.left,.right,.centerWrap{display:table-cell;}
.left,.right{width: 100px;}
.center{margin: 0 20px;}