html - 两个div之间的div

Question

这有点难以解释，所以为了更容易理解，我画了这个草图:

我基本上有两个 div，一个外部 div 和一个内部 div。我想要做的是，我想在 2 个 div 之间添加一条线。这可能吗？我应该如何处理？

Answer 1

像这样？

#outer {
  width: 400px;
  height: 300px;
  border: 1px solid red;
}
#inner {
  height: 125px;
  border: 1px solid blue;
  position: relative;
}
#line {
  position: absolute;
  width:1px;
  height: 50px;
  bottom: -25px; /*half the height*/
  left: 50%;
  border-left: 1px solid green;
}

<div id="outer">
  <div id="inner">
    <div id="line"></div>
  </div>
</div>

外层的 div 没什么特别的。

内部 div 获得相对位置，行 div 获得绝对位置。

通过将 div 行作为子元素和如上所述的位置，位置是相对于它的父元素定义的。因此，当使用 left: 50% 时，这意味着在父级的 50% 上。

安德鲁斯替代品

#outer {
  width: 400px;
  height: 300px;
  border: 1px solid red;
}
#inner {
  height: 125px;
  border: 1px solid blue;
  position: relative;
}
#inner:after {
  content: '';
  position: absolute;
  width:1px;
  height: 50px;
  bottom: -25px; /*half the height*/
  left: 50%;
  border-left: 1px solid green;
}

<div id="outer">
  <div id="inner">
  </div>
</div>