純粋なCSSの等しい高さの列には、ホバー上のボーダーボトムがありますか？

Question

純粋なCSSを使用してMatthew James Taylor's equal height columnsを試した後に、私が問題を解決するのを手助けできることを願っていました。

私はborder-bottomをユーザーが乗っ取ったときに追加しようとしています（画像参照：1）。私が抱えている問題は、これらのDIVが入れ子になっているので、境界が互いに重なるように見えることです（画像参照：3）。私はすべての罫線を均一なレベルにして、灰色の線とオーバーラップさせるようにしようとしています。

さらに、イメージの灰色の水平線は、黒でborder-bottomと同じレベルになります。タイトルの上にホバリングしていないとき（こんにちは！、連絡先、twitter）タイトルだけが表示されるまでスライドしてコンテンツを表示したいのですが、これがJavascriptを使用したいのです。多分、これはCSSだけでは不可能でしょうか、それとももっと良い方法がありますか？

**

Answer 1

これは、現在使用しているCSSの策略よりもdisplay: tableではるかに容易に解決されるだろうように見えます。でも画像を見た後、従うことが困難

http://jsfiddle.net/rrPKA/

#container { display: table; } 
.row { display: table-row; } 
.row > div { 
    display: table-cell; 
    width: 100px; 
    border-bottom: 1px solid lightgray; 
    padding-left: 10px; 
} 
.row > div:hover { border-bottom: 1px solid gray; }