用css3图片第一行会向上偏移？
来源：4-1 CSS3实现瀑布流布局
fel
2016-08-27 18:57
如图，第一行不一样高？
*{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;}
写回答
关注
4回答
-
- qq_0_165
- 2018-01-03 20:10:52
给box设置display：inline-block；
-
- qq_我叫红领巾_2
- 2017-02-16 23:27:35
给main 设置 display:inline-block;
-
- 小白师兄
- 2016-09-01 23:39:16
css3多栏布局偶尔会出现某一列起始高度比另外列的起始高度略高,或者会出现某一列第一张图片的顶部显示在它前一列最后一张图片后面,这是因为css3多列加载的机制是一列列的排满后再到第二列,以此来达到瀑布流的效果,浏览器在渲染这些图片的时候是按照宽度和列数(或者图片的设置宽度)来决定每列图片多少张,但是因为图片的高度是不定的,所以在首列加载完毕到次列开始渲染的时候,因为我们给box设置padding的原因,容易出现上述两种问题,不得不说这个有一定的偶然性,解决的方法是:不要给直接包裹图片的div设置padding值!
-
- 影月丶三
- 2016-08-27 19:30:37
css3的演示，我也试了，我的也有一列不对
瀑布流布局
瀑布流布局是网站比较流行的一种布局方式，教你实现三大方式
97759 学习 · 736 问题
相似问题