Question

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

JSFIDDLE

Answer 1

这是因为left和right都是auto。

然后，根据§10.3.7，

[If]＆＃39; left＆＃39;并且＆＃39;对＆＃39;是＆＃39; auto＆＃39;和＃＆＃39;宽度＆＃39;不是＆＃39; auto＆＃39;然后如果是＆＃39;方向＆＃39;建立静态位置的元素的属性] 包含块是＆＃39; ltr＆＃39;设置＆＃39;离开＆＃39;到static position，否则设置正确的＆＃39;到static-position。然后解决'左'＆＃39; （如果＆＃39;方向是＆＃39; rtl＆＃39;）或＆＃39;对＆＃39; （如果＆＃39;方向＆＃39;是＆＃39; ltr＆＃39;）。

静态位置定义为

左边的静态位置＆＃39;是距离左边缘的距离包含块到假设框的左边缘如果它的位置是第一个元素，那将是第一个元素。财产一直是静态的＆＃39;并且＆＃39;漂浮＆＃39;曾经没有了＃。

如果您不想要，请指定一个值：

.divider {
  left: 0;
}

Answer 2

任何人都可以弄清楚为什么将分隔符设置为position:absolute和display:inline-block不会导致它们像预期的那样一直浮动到父容器的左边？

因为您没有指定left值，所以它隐式auto，这意味着它们的左边缘位于它们在正常流程中的位置，如果它们没有绝对定位

此处描述并指定了此行为：http://www.w3.org/TR/CSS21/visudet.html#static-position

~~顺便说一下，设置display: inline-block在此处无效，display的计算值将自动为block，请参阅http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo~~ < / p> 此处需要

display: inline-block才能使元素首先在框之间取静态位置 - 因此观察到的效果需要上班。（仅在应用position:absolute之后，计算值将变为 block。）

你选择将这些分隔线放在这里的技术可能不是最佳选择，至少如果你的布局是流畅的 - 将你的小提琴的结果窗口缩小到三个红色框不能全部适合的点一行，你会明白我的意思......

Answer 3

如果您希望所有分隔线都保留在其父级的左侧，请更改其显示样式

而不是：

display: inline-block;

使用：

display: block;

意外的CSS行为？

3 个答案: