继承父母的身高指定

Question

我有以下几点：http://jsfiddle.net/DTyGn/1/

的问题是，跑下来的div中间的蓝线只应在父（.box）的高度，但那是不可能的，因为.box没有指定的高度，因为高度可以变化。

我该如何解决这个问题？

HTML：

<div class="box"> 
    Sample text. 
</div> 
<div class="box"> 
    Some more text.<br /> 
    Different height. 
</div> 

CSS：

.box { 
    padding: 50px 0; 
    text-align: center; 
    border: 1px solid black; 
    margin-bottom: 20px; 
} 

.box:after { 
    content: ""; 
    height: 100%; 
    width: 5px; 
    background: blue; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    margin-left: -2.5px; 
    z-index: -1; 
} 

Answer 1

只需添加position:relative你.box的股利。这里拨弄：http://jsfiddle.net/DTyGn/6/

Answer 2

添加.inner div来两个框和位置：相对于.box的，你应该设置。

http://jsfiddle.net/DTyGn/5/

CSS

.box { 
    padding: 50px 0; 
    text-align: center; 
    border: 1px solid black; 
    margin-bottom: 20px; 
    position:relative; 
} 

.inner:after { 
    content: ""; 
    height: 100%; 
    width: 5px; 
    background: blue; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    margin-left: -2.5px; 
    z-index: -1; 
} 

HTML

<div class="box"> 
    <div class="inner"> 
    Sample text. 
    </div> 
</div> 
<div class="box"> 
    <div class="inner"> 
    Some more text.<br /> 
    Different height. 
    </div> 
</div>