大佬教程收集整理的这篇文章主要介绍了html – CSS列数和Chrome错误：如何避免溢出内容被裁剪，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
#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; }
如果你在.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>
以上是大佬教程为你收集整理的html – CSS列数和Chrome错误：如何避免溢出内容被裁剪全部内容，希望文章能够帮你解决html – CSS列数和Chrome错误：如何避免溢出内容被裁剪所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。