最终效果不一样，如图
来源：4-1 CSS3实现瀑布流布局
晚晚Fighting
2018-10-30 14:21
*{ margin: 0; padding: 0;}
/*css3多栏布局*/
#main{
/*-webkit-column-width:267px;
-moz-column-width:267px;
-o-column-width:267px;
-ms-column-width:267px;*/
-webkit-column-count:6;
-moz-column-count:6;
-o-column-count:6;
-ms-column-count:6; }
.box{ padding: 15px 0 0 15px; }
.pic{ padding: 10px; border: 1px solid #ccc; border-radius: 2px; box-shadow: 0 0 5px #ccc;}
.pic img{ display: block; width: 230px; height: auto;}
写回答
关注
3回答
-
- 某星座的海星
- 2020-01-29 21:23:46
.pic{ width: 230px;//加上宽度， 和 .pic img里的宽度相同 padding: 10px; border: 1px solid #ccc; border-radius: 2px; box-shadow: 0 0 5px #ccc; } -
- 某星座的海星
- 2020-01-29 21:12:20
在13行.pic里加一个width：230px;
-
- qq_谁_15
- 2019-04-30 14:06:08
把设置圆角什么的样式设置在.html就可以了
瀑布流布局
瀑布流布局是网站比较流行的一种布局方式，教你实现三大方式
97759 学习 · 736 问题
相似问题