                        课程
                    
                        /前端开发
                        
                            /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

关注问题我要回答

1296

操作

收起

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

提交

取消

瀑布流布局

参与学习 97748 人
解答问题 758 个

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

进入课程

本课相似问答

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

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

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

1 回答如何实现加载时的图片透明度渐变效果

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

搜索更多本课相关问答

最终效果不一样，如图

我要回答关注问题

热搜

最近搜索清空

最终效果不一样，如图

3 回答

本课相似问答

最终效果不一样，如图