这很难解释,因此为了简化起见,我制作了此草图:

html - 在两个div之间插入div-LMLPHP

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

最佳答案

像这样?



#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%的父对象。

Andrews alternativ



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

10-07 19:52
查看更多