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

【问题标题】：div width transition, make 2nd div use remaining horizontal spacediv 宽度过渡，使第二个 div 使用剩余的水平空间
【发布时间】：2014-02-25 10:58:56
【问题描述】：

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

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

这可以用 css 实现吗？

非常感谢！

【问题讨论】：

一些 HTML，尝试使用 CSS？要求代码的问题必须表明对要解决的问题的最低理解。包括尝试过的解决方案、它们为什么不起作用以及预期的结果。

标签： css

【解决方案1】：

对于过渡，我认为您需要按如下方式使用浮点数：

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

}

【讨论】：

是的，这是拼图的最后一块！你让我今天一整天都感觉很好！ :)

【解决方案2】：

您可以通过table 显示来实现这一点：

<figure>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</figure>

figure {
    display: table;
    margin: 0;
    table-layout: fixed;
    width: 100%;
}

figure div {
    display: table-cell;
}

figure div:hover {
    width: 66.66%;
}

JSFiddle demo.

这里固定的table-layout属性确保所有单元格的宽度相同；由于我们有 3 列，因此在悬停时指定 66.66%（4/6th）的宽度意味着我们的另外两个 div 元素缩小到 16.66% 宽度 - 1/6th。

【讨论】：

效果非常好！非常感谢！
它会过渡吗？我无法让它工作，但也许我错过了一些东西。