.left {
width: 100px;
height: 100px;
background-color: #2AC845;
}
.center {
flex: 1;
height: 100px;
background-color: #007AFF
}
.right {
width: 100px;
height: 100px;
background-color:pink;
}
利用table实现布局
.parent {
width: 100%;
height: 100px;
display: table;
table-layout: fixed;
}
.left {
width: 100px;
height: 100px;
background-color: #2AC845;
display: table-cell;
}
.center {
height: 100px;
background-color: #007AFF;
display: table-cell
}
.right {
width: 100px;
height: 100px;
background-color:pink;
display: table-cell
}
一列不定宽，一列自适应
1.利用float+overflow实现
.parent {
width: 220px;
height: 100px;
background-color: #007AFF;
}
.left {
height: 100px;
background-color: #2AC845;
float: left;
}
.right {
height: 100px;
background-color:pink;
overflow: hidden;
float: right;
}
2.利用table实现
.parent {
width: 100%;
height: 100px;
background-color: #007AFF;
display: table;
table-layout: fixed;
}
.left {
width: 10%; //百分比
height: 100px;
background-color: #2AC845;
display: table-cell;
}
.right {
height: 100px;
background-color:pink;
display: table-cell;
}
3.利用flex实现
.parent {
width: 100%;
height: 100px;
background-color: #007AFF;
display: flex;
}
.left {
height: 100px;
background-color: #2AC845;
}
.right {
flex: 1;
height: 100px;
background-color:pink;
}
多列等分布局
多列等分布局常出现在内容中，多数为功能的，同阶级内容的并排显示等。
HTML :
1.float 实现
.parent {
width: 300px;
height: 100px;
}
.column {
width: 25%;
height: 100px;
background-color: #2AC845;
float: left;
padding-left: 10px;
box-sizing: border-box;
border: solid 1px #CF2D28;
margin-right: -1px;
}
2.利用table实现
.parent {
height: 100px;
display: table;
table-layout: fixed;
width: 50%;
border-collapse: collapse;
}
.column {
width: 25%;
height: 100px;
background-color: #2AC845;
padding-left: 10px;
display: table-cell;
border: solid 1px #EC971F;
}
3.flex布局
.parent {
height: 100px;
display: flex;
}
.column {
height: 100px;
background-color: #2AC845;
margin-left: 10px;
flex: 1;
}
3.九宫格布局
table 实现
代码
774
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
