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

用css3图片第一行会向上偏移？

如图，第一行不一样高？

*{margin:0;padding:0;}

#main{-webkit-column-width:202px;-webkit-column-count:6;}

.box{padding:15px 0 0 15px;}

.pic{width:165px;border-radius:5px;box-shadow:0 0 5px #ccc;padding:10px;border:1px solid #ccc;}

.pic img{width:165px;height:auto;display:block;}

.pic:hover{box-shadow:0 0 7px gray;}

fel

2016-08-27

源自：瀑布流布局 4-1

关注问题我要回答

1356

操作

收起

4 回答

qq_0_165
2018-01-03

给box设置display：inline-block；

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

收起回答

qq_我叫红领巾_2
2017-02-16

给main 设置 display:inline-block;

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

收起回答

小白师兄
2016-09-01

css3多栏布局偶尔会出现某一列起始高度比另外列的起始高度略高,或者会出现某一列第一张图片的顶部显示在它前一列最后一张图片后面,这是因为css3多列加载的机制是一列列的排满后再到第二列,以此来达到瀑布流的效果,浏览器在渲染这些图片的时候是按照宽度和列数(或者图片的设置宽度)来决定每列图片多少张,但是因为图片的高度是不定的,所以在首列加载完毕到次列开始渲染的时候,因为我们给box设置padding的原因,容易出现上述两种问题,不得不说这个有一定的偶然性,解决的方法是:不要给直接包裹图片的div设置padding值!

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

收起回答

前端小白花

不管用啊

2016-09-02 回复有任何疑惑可以回复我~