繼承父母的身高指定

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>