CSS上的两列布局悬停增加宽度

Question

我希望有一列有2列（都是流体），当我将一个元素悬停在其中一个列中时，它会通过水平滑动显示内容，这应该使列更宽，因此另一个更宽。这在纯CSS中是否可行？

[ Left column fluid (elementX)][Right column fluid]

鼠标悬停在（elementX）之后，我们会得到类似的结果：

[ Left column fluid (elementXxxxxxx)][Right col...]

这是一个可以更好地说明它的例子：

这在纯CSS中是否可行？如果有，怎么样？

这是一个小提琴：http://jsfiddle.net/hvh29/3/

Answer 1

您可以使用display: table-cell;或者也可以使用display: flex;，因此我会以最新的方式提供弹性方式，与旧的display: table-cell;方法相比更宽松实现目标的方式......

Demo

.wrap {
    display: flex;
}

.wrap .col {
    min-height: 100px;
    background: #eee;
    width: 50%;
    -webkit-transition: all .5s;
    transition: all .5s;
}

div.wrap > div:nth-of-type(1) {
    background: #aaa;
}

div.wrap > div:hover {
    width: 70%;    
}

我在here

上回答了类似的问题