框阴影的CSS列问题[重复]

Question

我正在使用 CSS 列数来创建网格。但是，我无法解决关于我正在使用的盒子阴影的小问题。

似乎每列的第一行顶部都被剪掉了。这不会影响边框，只会影响盒子阴影。

这里有一个小提琴：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，它适用于第一个元素，但不适用于其他元素。

Answer 1

起初我以为我戴眼镜后视力不太好，但我认为问题是你有两个box-shadows，两个y-offsets 都是阳性的。如果你想在元素顶部有阴影，y-offset 应该是负数：

box-shadow: 0 -1px 3px rgba(0, 0, 0, 1), 0 1px 2px rgba(0, 0, 0, 1);

这是您所期望的：http://jsfiddle.net/pnrv7byy/2/ 吗？

Answer 2

在我注意到 box-shadow 是 Webkit 在我的布局中相同大小的框之间平衡不一致的原因之前，我自己已经研究了很长时间。

我认为问题是这样的：Webkit（和 Blink）在 box-shadow 和列中存在错误，其中 box-shadow 会影响布局计算并弄乱列流。

目前看来，Safari 9 和 Blink 46 版本（可能是更早的版本）在整体柱高计算方面已修复部分柱流问题。然而，与 IE、Edge 和 Firefox 不同，Safari 9 和 Chrome 仍将box-shadow 视为额外差距。并且 Chrome 尤其切断了盒子阴影，显然也忽略了break-inside...

这是我对 Nadeemmnn 解决方案的替代方案： http://jsfiddle.net/hexalys/DTcHh/14980/

不同之处在于我避免在 div 内部为 box-shadow 包装器。相反，在这种情况下，我使用大致等于 box-shadow 尺寸 +0.5px 的margin-bottom。我使用margin-top 作为上边距，使用inline-block(s) 而不是块。这是我在列中推荐的内容。

这有点骇人听闻，但到目前为止对我来说似乎还可以。

PS：如果尚未提交，我会继续报告那些浏览器错误。

Answer 3

这是我的两个解决方案

解决方案1：

HTML

<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 class="item">
        <div class="thumbnail">
            <img src="http://buildsanctuary.com/user_uploads/cover_images/Bassboy,539.jpeg" />
        </div>
    </div>
    <div class="item">
        <div class="thumbnail">
            <img src="http://buildsanctuary.com/user_uploads/cover_images/Chino,920.jpeg" />
        </div>
    </div>
    <div class="item">
        <div class="thumbnail">
            <img src="http://buildsanctuary.com/user_uploads/cover_images/Wenman,738.jpeg" />
        </div>
    </div>
    <div class="item">
        <div class="thumbnail">
            <img src="http://buildsanctuary.com/user_uploads/cover_images/Bassboy,539.jpeg" />
        </div>
    </div>
    <div class="item">
        <div class="thumbnail">
            <img src="http://buildsanctuary.com/user_uploads/cover_images/Chino,920.jpeg" />
        </div>
    </div>
    <div class="item">
        <div class="thumbnail">
            <img src="http://buildsanctuary.com/user_uploads/cover_images/Chino,920.jpeg" />
        </div>
    </div>
    <div class="item">
        <div class="thumbnail">
            <img src="http://buildsanctuary.com/user_uploads/cover_images/Wenman,738.jpeg" />
        </div>
    </div>
    <div class="item">
        <div class="thumbnail">
            <img src="http://buildsanctuary.com/user_uploads/cover_images/Wenman,738.jpeg" />
        </div>
    </div>
    <div class="item">
        <div class="thumbnail">
            <img src="http://buildsanctuary.com/user_uploads/cover_images/Bassboy,539.jpeg" />
        </div>
    </div>
    <div class="item">
        <div class="thumbnail">
            <img src="http://buildsanctuary.com/user_uploads/cover_images/Chino,920.jpeg" />
        </div>
    </div>
    <div class="item">
        <div class="thumbnail">
            <img src="http://buildsanctuary.com/user_uploads/cover_images/Bassboy,539.jpeg" />
        </div>
    </div>
    <div class="item">
        <div class="thumbnail">
            <img src="http://buildsanctuary.com/user_uploads/cover_images/Chino,920.jpeg" />
        </div>
    </div>
    <div class="item">
        <div class="thumbnail">
            <img src="http://buildsanctuary.com/user_uploads/cover_images/Wenman,738.jpeg" />
        </div>
    </div>
    <div class="item">
        <div class="thumbnail">
            <img src="http://buildsanctuary.com/user_uploads/cover_images/Chino,920.jpeg" />
        </div>
    </div>
</div>

Demo

这里我们删除了项目的盒子阴影并添加了缩略图，即从引导程序中添加

解决方案2

Demo2