html如何设置一行多列,如何实现一行多列？

1 .Bootstrap 中可以引用 row 属性确定元素属于通一行，确定每个元素大小以及偏移量

Title

第一列

第二列

第三列

2. CSS3 新增的多列布局

Title

.multi_column {

-webkit-column-count: 3; // 表示布局几列

-webkit-column-rule: 1 px solid #bbb; //表示列与列之间的间隔条的样式

-webkit-column-gap: 2 em; // 表示列于列之间的间隔

}

第一列

第二列

第三列

3. position: absolute 绝对定位法

Title

h3{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

Title

p{margin: 0;}

.parent{display: table; width: 100%;table-layout: fixed;}

.left,.right,.centerWrap{display:table-cell;}

.left,.right{width: 100px;}

.center{margin: 0 20px;}

左边

中间

右边