30

我希望 CSS 列中的块元素具有box shadow。以下简化代码在 IE10 和 Firefox 21 中按预期呈现，但在当前 Chrome 版本 (28.0.1500.72)中，列边附近的阴影被修剪。

图像以 IE/FF（左侧）和右侧的 Chrome 显示结果：

在 IE/Firefox 中呈现的代码 在 Chrome 中呈现的代码

（还有一些垂直偏移，但这不是问题）

这是jsfiddle：http: //jsfiddle.net/buli_pl/KxYRc/1/

div#column-container {
  /* Set 2 columns*/
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}
div#column-container div {
  background-color: yellow;
  /* set shadow for yellow elements */
  box-shadow: 0px 1px 3px #000;
  -webkit-box-shadow: 0px 0px 15px #000;
  -moz-box-shadow: 0px 0px 15px #000;
  box-shadow: 0px 0px 15px #000;
  /* Make sure that yellow div is not split between columns */
  display: inline-block;
  width: 100%;
  /* the rest - just to better present the problem */
  height: 70px;
  margin-top: 0;
  margin-bottom: 20px;
}
<div id="column-container">
  <div>box 1</div>
  <div>box 2</div>
  <div>box 3</div>
  <div>box 4</div>
  <div>box 5</div>
  <div>box 6</div>
</div>

我是在滥用其中的一些属性，还是这是 Chrome 问题？目前如何解决？

4

11 回答 11

47

刚刚发生了一个可能更直接的解决方案，该解决方案似乎有效。应用变换： translateZ(0); 带有 box-shadows 的元素似乎正在解决这个问题。在提供的代码中，您可以将此添加到您的div#column-container div规则中。

.container{
  break-inside: avoid;
  column-count: 2;
  column-gap: 2rem;
}
.box{
  border-radius: 4px;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
  margin-bottom: 1rem;
  padding: 1rem;
  break-inside: avoid;
  transform: translateZ(0);
}

https://codepen.io/MarkitDigital/pen/RdLoRG

于 2019-03-11T21:37:15.250 回答
6

您可以为此使用flexbox而不是 css 列。

小提琴

注意：这目前在 Firefox 中不起作用，因为它仍然不支持该flex-wrap属性，但是根据caniuse - 这将在版本 28 中得到支持

CSS

div#column-container {   
    height: 270px; /* NB: IE requires the height property. max-height won't work on IE)*/
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
}

编辑：（更新了 FIDDLE，其中包括对 Firefox 的支持）

根据@buli 的建议，只要不支持 flex-wrap，就暂时将 -moz-colums-count 用于 Firefox：

好吧，您可以使用 @supports 来执行此操作，它允许我们执行功能查询 - 有点像 Modernizr，但使用 CSS。

这里的好处是Firefox 支持它们。

因此，如果我添加以下代码：（根据 Pavlo 的建议更新）

@supports (not (flex-wrap: wrap)) and (-moz-columns: 2) {
    div#column-container { 
        -moz-column-count: 2;
        column-count: 2;
        display: block;
        width: 50%;
    }
}

现在，Firefox 将使用 CSS 列，而其他浏览器将使用 flexbox。

于 2013-12-31T12:03:42.473 回答
4

这也应该工作：http ://codepen.io/anon/pen/fiHCv

（从我的评论中得到你的感觉:)）

它可以使用 calc() 来减少块的宽度以让阴影被看到并重新处理边距和填充以获得更好的布局 

div#column-container {   
    /* Set 2 columns*/
    column-count: 2;
  column-gap:0;
  width:80%;
  margin:auto;
  padding:20px 0;
}

div#column-container div {
    background-color: yellow;
    box-shadow: 0px 0px 15px #000; 

    /* Make sure that yellow div is not split between columns */
    display: inline-block;
  /* leave room for shadow to be drawn */
    width: calc(100% - 30px);
    /* the rest - just to better present the problem */
    height: 70px;
    margin: 20px;    
}

管理边距和填充，因此列的顶部可能位于同一垂直水平并适合您的网格

于 2014-01-05T01:48:11.960 回答
4

这是 Chrome 的一个简单解决方法：对于黄色块，只需更改宽度和边距。要显示阴影，您需要确保块周围有一些边距空间。

width: 80%;
margin: 1em 10%;

http://jsfiddle.net/dPg2n/1/ --- 适用于 Chrome 31 和 FireFox 10.0.2。

于 2014-01-06T23:36:55.800 回答
2

Chrome 无法补偿阴影添加的额外宽度。

如果添加“文本对齐：中心；” 到 div#column-container，黄色的内部 div 将居中，您现在可以在左边缘看到阴影。

如果更改无关紧要的“宽度：100%;” 黄色内部 div 上的“宽度：85%；” （或您选择的宽度）现在整个阴影都有空间了。

div#column-container {   
  /* Set 2 columns*/
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;

   /* insignificant - except text-align, which corrects Chrome */
  width: 50%;
  text-align: center;
}

div#column-container div {
  background-color: yellow;

  /* set shadow for yellow elements */
  box-shadow: 0px 1px 3px #000;
  -webkit-box-shadow: 0px 0px 15px #000;
  -moz-box-shadow:    0px 0px 15px #000;
  box-shadow:         0px 0px 15px #000; 

  /* Make sure that yellow div is not split between columns */
  display: inline-block;

  /* the rest - width was significant for Chrome, you may need to adjust for your real project */
  width: 85%;
  height: 70px;
  margin-top: 0;
  margin-bottom: 20px;    
}

这是一个jsFiddle。

于 2014-01-01T07:22:05.490 回答
1

我认为列数与 chrome 冲突...

尝试这个：

div#column-container {
  /* Set 2 columns*/
  /* insignificant */
  width: 50%;
}

div#column-container div {
  background-color: yellow;

  /* set shadow for yellow elements */
  box-shadow: 0px 0px 15px #000;
  -webkit-box-shadow: 0px 0px 15px #000;
  -moz-box-shadow:    0px 0px 15px #000;

  /* Make sure that yellow div is not split between columns */
  display: inline-block;

  /* the rest - not significant */
  width: 46%;
  height: 70px;
  margin-top: 0;
  margin-bottom: 20px;
  margin-right: 2%;
  float:left;
}
于 2013-07-26T13:15:38.150 回答
1

Had similar issues with a 3 column layout. Chrome cut the box-shadow but only on top in column 2 and 3...

box-shadow cut

enter image description here

Margin Workaround:

.item {
  box-shadow: 0px 0px 15px #000;
  display: inline-block;
  margin-top: 15px; /* same as box-shadow blur */     
  width: 100%;
}
.container{
  column-count: 3;
  column-gap: 30px;
  margin-top: -15px;/* negative value same as box-shadow blur & item margin-top */
}
于 2018-07-16T12:57:26.820 回答
0 
div#column-container {   
    /* Set 2 columns*/
    overflow: hidden;
    padding: 5px;
    display: block;

     /* insignificant */
    width: 50%;
}

div#column-container div {
    background-color: yellow;
    float: left;
    width: 40%;
    margin: 5%;

    /* set shadow for yellow elements */
    box-shadow: 0px 1px 3px #000;
    -webkit-box-shadow: 0px 0px 15px #000;
    -moz-box-shadow:    0px 0px 15px #000;
    box-shadow:         0px 0px 15px #000;

    /* Make sure that yellow div is not split between columns */
    display: block;

    /* the rest - not significant */
    height: 70px;
}

这会给你几乎相似的外观。

小提琴就在这里。

PS根据您的要求自行更改边距和宽度值以使框更接近。

于 2013-07-26T13:23:44.373 回答
0

一个快速的解决方法是将你的盒子包围在更大的透明 div 中，为阴影留出足够的空间。这解决了这两个问题。

<div id="column-container">
  <div class="outer"><div>box 1</div></div>
  <div class="outer"><div>box 2</div></div>
  <div class="outer"><div>box 3</div></div>
  <div class="outer"><div>box 4</div></div>
  <div class="outer"><div>box 5</div></div>
  <div class="outer"><div>box 6</div></div>
</div>

div#column-container {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

div#column-container div {
  background-color: yellow;
  box-shadow: 0px 1px 3px #000;
  -webkit-box-shadow: 0px 0px 15px #000;
  -moz-box-shadow: 0px 0px 15px #000;
  box-shadow: 0px 0px 15px #000;
  width: 100%;
  height: 70px;
  margin: 0;
}

.outer {
  break-inside: avoid;
  padding-top: 0px;
  padding-left: 4px;
  padding-right: 4px;
  padding-bottom: 20px; 
}
于 2021-03-17T07:38:55.823 回答
0

这是一个与铬相关的错误。基本上，chrome 似乎并不擅长渲染 csscolumns属性。https://code.google.com/p/chromium/issues/detail?id=467196

于 2015-12-16T23:55:41.963 回答
0 
.box {
  break-inside: avoid;
  column-count: 2;
  column-gap: 2rem;
}
.item {
  border-radius: 4px;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
  margin-bottom: 1rem;
  padding: 1rem;
  break-inside: avoid;
  transform: translateZ(0);
}
于 2021-06-02T13:52:29.960 回答