这很难解释,因此为了简化起见,我制作了此草图:
我基本上有两个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>