纯CSS等于高度列，边框底部悬停？

Question

我希望你能帮助我找到解决我在使用纯CSS尝试Matthew James Taylor's equal height columns后遇到的问题的方法。

我正在尝试在用户盘旋时向列中添加border-bottom（请参见图片：1 ）。我遇到的问题是，当这些DIV嵌套时，边框似乎堆叠在彼此之上（参见图像：3 ）。我试图将所有边界放在一个均匀的水平上，因为我想要的效果会使它们与灰线重叠

此外，图像中的灰色水平线将拉伸到页面的100％宽度，并且与黑色border-bottom处于均匀水平。当没有悬停在任何标题上时（在那里！，联系人，推特）我希望带有内容的列向上滑动，直到只有标题可见，这将是我唯一想要使用Javascript的东西。也许所有这些都不可能只使用CSS，或者可能有更好的方法吗？

**

Answer 1

看起来使用display: table比使用当前使用的CSS技巧更容易解决这个问题。

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; }