Question

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

像这样：
[--- --- DIV1] [--- --- DIV2] [--- --- DIV3]
在悬停时：
[--------- --------- DIV1] [DIV2] [DIV3]

这可以用css吗？

非常感谢！

Answer 1

您可以使用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/6）意味着我们的另外两个div元素缩小到16.66％宽度 - 1/6。

Answer 2

对于过渡，我认为您需要使用浮动，如下所示：

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

}

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

2 个答案: