划分为两个div

Question

这很难解释，所以为了让我更容易做出这个草图：

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

Answer 1

喜欢这个吗？

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

外部div没什么特别的。

内部div得到一个相对位置，而行div得到一个绝对位置。

通过将行div作为子元素和上述位置，将相对于父元素定义位置。所以当使用left: 50%时，就意味着50％的父母。

Andrews alternativ

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;