                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /瀑布流布局

最终效果不一样，如图

*{    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;}

晚晚Fighting

2018-10-30

源自：瀑布流布局 4-1

关注问题我要回答

1226

操作

收起

3 回答

某星座的海星
2020-01-29

 .pic{
 width: 230px;//加上宽度， 和 .pic img里的宽度相同
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 2px;
 box-shadow: 0 0 5px #ccc;
 }

0 回复有任何疑惑可以回复我~

收起回答

某星座的海星
2020-01-29

在13行.pic里加一个width：230px;

0 回复有任何疑惑可以回复我~

收起回答

qq_谁_15
2019-04-30

把设置圆角什么的样式设置在.html就可以了

0 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

瀑布流布局

参与学习 97759 人
解答问题 736 个

瀑布流布局是网站比较流行的一种布局方式，教你实现三大方式

进入课程

本课相似问答

2 回答看着视屏写了，没有实现最终的效果，好烦人啊!哪里出错了？

1 回答为什么换用append()效果不一样，出现重叠？

2 回答为什么我做的和老师做出的效果不一样

2 回答最后一个图片真的是“最后”一个吗？

1 回答第一个图片和最后一个图片名的宽度和中间的图片的宽度一样吗，第一个和最后一个有15px的padding

搜索更多本课相关问答

最终效果不一样，如图

我要回答关注问题

热搜

最近搜索清空

最终效果不一样，如图

3 回答

本课相似问答

最终效果不一样，如图