html - 3 个动态内联 div 未固定到位

Question

我正在研究一个简单的 3 div 布局。 div 的宽度均设置为 33.3%，高度设置为 100%。我希望发生的情况是，将鼠标悬停在任何一个 div 上时，该 div 会扩展至 40% 宽度，而另外两个 div 的宽度各减少 3.5%各自的宽度。不幸的是，发生的情况是右侧的 div 下降到下一行。

我非常有信心可以使用 jQuery 轻松完成此操作，但我更喜欢使用纯 css 来完成此操作。

这是代码的 fiddle :

https://jsfiddle.net/99gL47rp/1/

感谢任何帮助! :)

Answer 1

你完全可以做到!你只需要稍微不同地思考一下。 https://jsfiddle.net/jpw4w7ou/ .

/*Use this to give all the child divs the same 33% width */
#sections > div {
    width: 33.3%;
}

/*On hover of the container, drop ALL the children's width to 30% */
#sections:hover > div {
    width: 30%;
    transition:width 0.5s;
}

/*Finally, give the actual child div you are hovering over a width of 40%. This will override the previous selector's 30% width only for the currently hovered element */
#sections > div:hover{
    width: 40%;
    transition:width 0.5s;
}

请注意，我删除了 clear:left，它没有必要，而且会导致问题。