6

使用时column-count，它似乎会裁剪任何溢出内容。

#columns {
  -webkit-column-count: 1;
  -webkit-column-gap: 10px;
  /*-webkit-column-fill: auto;*/
  -moz-column-count: 1;
  -moz-column-gap: 10px;
  /*-moz-column-fill: auto;*/
  column-count: 1;
  column-gap: 10px;
  /*column-fill: auto;*/
  border: 1px solid red;
  overflow: visible;
}
.pin {
  width: 100%;
  display: inline-block;
  padding: 10px;
  margin-bottom: 5px;
}
<div id="columns">

  <div class="pin">

    <a href="#">
      <span class="onsale">Sale!</span>
      <img src="#.jpg" />
    </a>
    <h3>Product 1</h3>
    </a>
  </div>

</div>

结果：

在此处输入图像描述

有什么想法可以解决这个问题吗？

编辑1：

这似乎是Chrome中的一个错误。

虽然在 Firefox 上很好：

在此处输入图像描述

编辑2：

span.onsale {
    min-height: 3.236em;
    min-width: 3.236em;
    padding: .202em;
    font-size: 1em;
    font-weight: 700;
    position: absolute;
    text-align: center;
    line-height: 3.236;
    top: -.5em;
    left: -.5em;
    margin: 0;
    border-radius: 100%;
    background-color: $highlight;
    color: $highlightext;
    font-size: .857em;
    -webkit-font-smoothing: antialiased;
}
4

4 回答 4

11

添加transform: translateZ(0);到您.pin以启用硬件加速作为解决方法。

于 2016-12-15T11:28:27.390 回答
2

我也有一个解决办法。

这个例子展示了使用

transform: translateZ(0);

这解决了裁剪问题。它还展示了一种在悬停时使用 z-index 在其他列块上方显示内容的巧妙方法：

https://codepen.io/HaloDesign/pen/zdRoYZ

于 2017-08-18T09:59:57.347 回答
1

我不知道你是如何设计你的.onsale ，所以我按照自己的方式设计。

如果你使用position:relativein.pin然后position:absolute你可以实现你想要的。

更新：问题出webkit-column-count:1在 Chrome 中，因为有1或没有相同，只需删除它并使用另一种技术，让您.onsale通过使用position:absolute

#columns {
 
  border: 1px solid red;
  
}
.pin {
  width: 100%;
  display: inline-block;
  padding: 10px;
  margin-bottom: 5px;
  position: relative
}
.onsale {
   min-height: 3.236em;
    min-width: 3.236em;
    padding: .202em;
    font-size: 1em;
    font-weight: 700;
    position: absolute;
    text-align: center;
    line-height: 3.236;
    top: -.5em;
    left: -.5em;
    margin: 0;
    border-radius: 100%;
    background-color: lightgreen;
    color: white;
    font-size: .857em;
    -webkit-font-smoothing: antialiased;
}
<div id="columns">
  <div class="pin">
    <a href="#">
      <span class="onsale">Sale!</span>
      <img src="//placehold.it/300x300" />
    </a>
    <h3>Product 1</h3>
  </div>
  <div class="pin">
    <a href="#">
      <span class="onsale">Sale!</span>
      <img src="//placehold.it/300x300" />
    </a>
    <h3>Product 2</h3>
  </div>
</div>

于 2016-03-15T11:43:05.513 回答
0

只需在#columns 类中使用填充

于 2016-03-15T11:19:47.807 回答