在使用分隔线占据容器的整个高度而没有父母的高度时,我偶然发现了以下情况。任何一个可以弄清楚为什么设置分频器,position:absolute
并display:inline-block
不会导致他们漂浮一路留下的父容器像预期?为什么它们实际上是内联的?
的HTML
<div class="wrapper">
<div class="box"></div>
<div class="divider"></div>
<div class="box"></div>
<div class="divider"></div>
<div class="box"></div>
</div>
的CSS
.wrapper{
width:100%;
text-align:center;
position: relative;
}
.box{
display: inline-block;
width: 150px;
height: 100px;
background: red;
margin: 0 0 0 5px;
}
.divider{
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: black;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句