当使用列计数时,它似乎会裁剪任何溢出内容.
#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;
}
解决方法
我不确定你是如何设计你的.onsale所以我按自己的方式设计.
如果你在.pin中使用position：relative,然后在position：absolute中使用你可以达到你想要的效果.
更新：问题是Chromekit中的webkit-column-count：1,因为只有1或者没有相同的东西,只需删除它并使用另一种技术,允许你通过使用位置使.onsale流出：绝对
#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>
