css - div 宽度过渡，使第二个 div 使用剩余的水平空间

Question

我有三个 div 占据了水平空间的三分之一。当我将鼠标悬停在其中一个上时，它会过渡到水平空间的三分之二。当我将鼠标悬停在该 div 上时，我希望其余两个 div 分别缩小到六分之一。所以基本上我希望它们填充第一个 div 扩展时留下的任何水平空间。

像这样:
[---div1---][---div2---][---div3---]
悬停时:
[--------div1--------][div2][div3]

这可以用 css 实现吗？

非常感谢!

Answer 1

对于过渡，我认为您需要按如下方式使用 float :

JSFiddle

HTML

1个 2个 3个

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

figure {
    margin: 0;
    overflow:hidden;
}

figure div {
    float:left;
    width:33%;
    border:1px solid red;
    transition: width 0.5s ease;
}

figure:hover div {
    width:16.5%;
}

figure div:hover {
    width: 66.66%;