公共样式部分代码：
(推荐教程：CSS教程)html * {
margin: 0;
padding: 0;
}
.layout {
margin-bottom: 20px;
}
.layout article {
width: 100%;
}
.layout article > div {
min-height: 100px;
}
.layout article .left {
width: 300px;
background: red;
}
.layout article .center {
background: orange;
}
.layout article .right {
width: 300px;
background: blue;
}
float布局
.layout.float .left {
float: left;
}
.layout.float .right {
float: right;
}
这是float布局
这是一段文字
这是一段文字
absolute布局
.layout.absolute .left-center-right > div {
position: absolute;
}
.layout.absolute .left {
left: 0;
}
.layout.absolute .center {
left: 300px;
right: 300px;
}
.layout.absolute .right {
right: 0;
}
这是absolute布局
这是一段文字
这是一段文字
flex布局
.layout.flex {
margin-top: 140px;
}
.layout.flex .left-center-right{
display: flex;
}
.layout.flex .center {
flex: 1;
}
这是flex布局
这是一段文字
这是一段文字
table布局
.layout.table .left-center-right {
display: table;
height: 100px;
}
.layout.table .left-center-right > div{
display: table-cell;
}
这是table布局
这是一段文字
这是一段文字
grid布局
.layout.grid .left-center-right {
display: grid;
grid-template-columns: 300px auto 300px;
}
这是grid布局
这是一段文字
这是一段文字
扫一扫
5691
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
