Question

我试图创建一个pinterest风格的布局。我已达到差不多完成但唯一的问题是，如果您滚动到页面底部，您会看到box-shadow打破前3列。

我该如何避免这种情况？

＆＃13;

#container {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  -webkit-column-gap: 15px;
  -moz-column-gap: 15px;
}

.entity {
  width: 100%;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  margin-bottom: 15px;
  display: inline-block;
  /* float: left; */
  box-shadow: 0 0 10px #000;
}

.entity:nth-child(2n) {
  height: 80px;
  background-color: yellow;
}

.entity:nth-child(2n+1) {
  height: 100px;
  background-color: red;
}

.entity:nth-child(3n) {
  height: 150px;
  background-color: green;
}

＆＃13;

<div id="container">
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
</div>

＆＃13;

Answer 1

这似乎是一个webkit错误，因为该问题在Firefox中无法重现。已针对此问题Bug 14137 - box-shadow on element inside multi-column doesn't draw outside column boundary和Bug 101184 - box-shadow is cropped when using column-count and column-gap提交了一些（未经证实的）webkit错误报告。

Chrome将元素移动到新列时，似乎没有考虑box-shadow。解决此问题的一种方法是将margin-top添加到.entity div。这将有效地充当box-shadow的保留空间，并将阻止它跨列分割。

您的代码已经进行了以下修改：

margin-top: -6px;已添加到#container以反击margin-top: 6px;

.entity

margin-top: 6px;已添加到.entity以充当box-shadow
margin-bottom已更改为9px; .entity以保持元素之间的相同空间

＆＃13;

#container {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  -webkit-column-gap: 15px;
  -moz-column-gap: 15px;
  margin-top: -6px;
}

.entity {
  width: 100%;
  margin-top: 6px;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  margin-bottom: 9px;
  display: inline-block;
  /* float: left; */
  box-shadow: 0 0 10px #000;
}

.entity:nth-child(2n) {
  height: 80px;
  background-color: yellow;
}

.entity:nth-child(2n+1) {
  height: 100px;
  background-color: red;
}

.entity:nth-child(3n) {
  height: 150px;
  background-color: green;
}

＆＃13;

<div id="container">
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
</div>

＆＃13;

Answer 2

我做了不同的评论，它对我有用... 这样：

<div id="container">
   <div class="entity-protection">
     <div class="entity"></div>
   </div>
</div>

实体保护css：border: 5px solid transparent; break-inside: avoid;

重点是：带有阴影的div应位于保护div内，以避免其中断。

我希望它有所帮助。

在CSS中使用列时删除框阴影中断

2 个答案: