意外的CSS行为?

jmore009

在使用分隔线占据容器的整个高度而没有父母的高度时,我偶然发现了以下情况。任何一个可以弄清楚为什么设置分频器,position:absolutedisplay: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;
}

JSFIDDLE

i

这是因为leftright都是auto

然后,根据§10.3.7

[如果]“左”和“右”为“自动”,“宽度”不是“自动”,则如果包含块的静态位置的“方向”属性为“ ltr”,则设置为“左”设置为静态位置,否则将“正确”设置为静态位置然后求解“ left”(如果“ direction”为“ rtl”)或“ right”(如果“ direction”为“ ltr”)。

静态位置定义为

“左”的静态位置是从包含块的左边缘到假设框的左边缘的距离,如果该框的元素的“位置”属性为“静态”和“浮动”一直没有。

如果您不想这样做,请指定一个值:

.divider {
  left: 0;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章