在ul中使用绝对定位子div
在ul中使用绝对定位子div
提问于 2017-09-07 12:18:12
我目前正面临一个问题，使用column-count与一个绝对定位的div作为一个子。
ul {
column-count: 3;
margin-top: 50px;
}
ul > li {
position: relative;
height: 300px;
list-style: none;
}
ul > li > .child {
position: absolute;
top: -20px;
}<ul>
<li>
<div class="child">Positioned Absolute</div>
Just some extra content
</li>
<li>
<div class="child">Positioned Absolute</div>
Just some extra content
</li>
<li>
<div class="child">Positioned Absolute</div>
Just some extra content
</li>
</ul>
当使用负top时，它似乎要换到上一篇专栏文章中，是否可以绕过这一点呢？
我可以使用width: 33%，但是这将根据列的数量而改变，但是是否可以使用column-count来实现呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-09-07 12:31:02
只要添加-webkit-transform: translate3d(0, 0, 0); -webkit-column-break-inside: avoid;就可以了
ul {
column-count: 3;
margin-top: 50px;
}
ul > li {
position: relative;
height: 300px;
list-style: none;
-webkit-transform: translate3d(0, 0, 0);
-webkit-column-break-inside: avoid;
}
ul > li > .child {
position: absolute;
top: -20px;
}<ul>
<li>
<div class="child">Positioned Absolute</div>
Just some extra content
</li>
<li>
<div class="child">Positioned Absolute</div>
Just some extra content
</li>
<li>
<div class="child">Positioned Absolute</div>
Just some extra content
</li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46096153
复制相关文章
相似问题
腾讯云开发者
