<分区>
我正在使用 CSS 列计数来创建网格。但是,我无法解决有关我正在使用的框阴影的小问题。
似乎每一列的最上面一行都被剪掉了。这不会影响边框,只会影响框阴影。
这是一个 fiddle :http://jsfiddle.net/DTcHh/3947/
如果你仔细观察,你会发现最上面的行元素没有阴影,看起来像是被剪到了列的底部?滚动到容器底部,您会在那里看到阴影的顶部。
有什么解决办法吗?
一些备份的CSS:
#builds {
width: 96%;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 2%;
}
.cols {
-moz-column-count:3;
-webkit-column-count:3;
column-count: 3;
}
.item {
height: auto;
width: 99%;
margin-left: 1%;
-webkit-column-break-inside: avoid;
-o-column-break-inside: avoid;
-moz-column-break-inside: avoid;
break-inside: avoid;
border: 4px solid #000;
box-shadow: 0 1px 3px rgba(0, 0, 0, 1), 0 1px 2px rgba(0, 0, 0, 1);
margin-bottom: 20px;
}
<div id="builds" class="cols">
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Wenman,738.jpeg" />
</div>
</div>
</div>
填充到列容器的顶部不起作用。如果我给 items 类留出 10 个边距,它会作用于第一个元素而不是其他元素。