划分为两个div

Question

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

我基本上有两个div一个外部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>