2种栅格布局的简单实现方式
导读：一、使用float： 复制代码 代码如下: section { border: solid 1px; } section section { float: left; margin-left: 10px; margin-to...
一、使用float：
复制代码 代码如下:section
{
border: solid 1px;
}
section section
{
float: left;
margin-left: 10px;
margin-top: 10px;
text-align: center;
width: 200px;
border-radius: 20px;
height: 200px;
}
.parent
{
height: 440px;
width: 660px;
}
.parent section:first-child
{
height: 410px;
}
A
B
C
D
E
二、使用display：flex（这个css3属性仅谷歌和火狐支持）
复制代码 代码如下:section
{
border: solid 1px;
}
section section
{
margin-left: 10px;
margin-top: 10px;
text-align: center;
width: 200px;
border-radius: 20px;
height: 200px;
}
.parent
{
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 440px;
width: 660px;
}
.parent section:first-child
{
height: 410px;
}
A
B
C
D
E
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 2种栅格布局的简单实现方式
本文地址： https://pptw.com/jishu/668040.html