css3两行三列

CSS3的两行三列布局是Web界面设计中常用的布局之一，它可以让网页更加美观，更好地展示内容。这种布局的实现方式比较简单，只需要掌握CSS3的关键属性就可以轻松地实现。

/*以下是CSS3的两行三列布局样式*/
.container{
display:flex;  /*使用弹性布局*/
flex-wrap:wrap;  /*弹性布局允许自动换行*/
justify-content:space-between;  /*均匀分布在水平方向上*/
}
.item{
width:30%;  /*每个元素占据的宽度为30%*/
margin-bottom:20px;  /*元素间的间距为20px*/
}

上面的代码中，我们使用了CSS3的flexbox弹性布局实现了两行三列的布局。其中，.container是父容器，.item是子元素。为了使它们呈现出比较优美的效果，我们设置了每个元素占据30%的宽度，将它们间的间距设置为20px。

需要注意的是，在使用CSS3的flexbox布局时，不同的浏览器对其支持有所差异。对于IE浏览器，需要使用前缀-webkit-和-ms-来实现对flexbox属性的支持。但是由于IE浏览器已经逐渐淘汰，所以我们可以放心地使用CSS3的flexbox属性来实现布局。

查看更多关于css3两行三列的详细内容...