Question

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

似乎每列的顶行都有顶部剪裁。这不会影响边框，只会影响框阴影。

如果仔细观察，可以看到顶行项目没有阴影，看起来它已被剪裁到列的底部？滚动到容器的底部，您将看到阴影的顶部。

任何想法如何解决？

一些备份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-shadow个y-offset两个y-offset s是正面的。如果你想在元素的顶部有一个阴影，box-shadow: 0 -1px 3px rgba(0, 0, 0, 1), 0 1px 2px rgba(0, 0, 0, 1);应该是负数：

{{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仍将break-inside视为额外差距。特别是Chrome会切断盒子阴影，显然也忽略了div ......

以下是Nadeemmnn解决方案的替代方案： http://jsfiddle.net/hexalys/DTcHh/14980/

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

这是hackish，但到目前为止它似乎对我有用。

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

这里我们删除了item的box-shadow并添加了缩略图，即来自bootstrap

<强>溶液2

Demo2

带有框阴影的CSS列问题

3 个答案: