html - 悬停时CSS两列布局增加宽度

Question

我想要一行有 2 列(都是流体)，当我将一个元素悬停在其中一列中时，它将通过水平滑动显示内容，这应该使列更宽，因此另一列更窄。这在纯 CSS 中可能吗？

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

将鼠标悬停在 (elementX) 上，我们会得到如下内容:

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

这里有一个例子可以更好地说明这一点:

这在纯 CSS 中可行吗？如果是，如何？

这是一个 fiddle :http://jsfiddle.net/hvh29/3/

Answer 1

你可以使用 display: table-cell; 或者你也可以使用 display: flex;，所以我会贡献 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 上回答过类似的问题