html - 覆盖部分 CSS 垂直 Accordion 的宽度

Question

我想创建一个带有 3 个 div 的纯 CSS 垂直 Accordion ，中间的总是保持其宽度 (40%)。在初始状态下，我的 3 个 div 必须是这样的:

• 第一个 div:宽度的 30%
• 第二个 div:宽度的 40%
• 最后一个 div:宽度的 30%

当悬停第一个或最后一个 div 时，它必须扩展到 58% 的宽度。

但是，由于我的元素的初始宽度设置为 30%，最后一个 div 并没有像我想要的那样展开:

body {
  margin: 0;
  height: 100%;
}

.donslide {
  display: table;
  width: 100%;
  height: 400px;
}

.donslide .item {
  display: table-cell;
  background: #ddd;
  width: 30%;
  transition: 0.6s ease-in-out all;
  overflow: hidden;
  position: relative;
}

.center {
  display: table-cell;
  width: 40%;
  background: black;
}

.item:hover {
  width: 58%;
}

<div class="donslide">
  <div class="item"></div>
  <div class="center"></div>
  <div class="item"></div>
</div>

如果我删除我的元素的宽度设置，一切都像魅力一样，但过渡:

body {
  margin: 0;
  height: 100%;
}

.donslide {
  display: table;
  width: 100%;
  height: 400px;
}

.donslide .item {
  display: table-cell;
  background: #ddd;
  transition: 0.6s ease-in-out all;
  overflow: hidden;
  position: relative;
}

.center {
  display: table-cell;
  width: 40%;
  background: black;
}

.item:hover {
  width: 58%;
}

<div class="donslide">
  <div class="item"></div>
  <div class="center"></div>
  <div class="item"></div>
</div>

我怎样才能让我的 Accordion 工作，同时保持甜蜜的过渡？

Answer 1

Flex box 是你的救星，你可以利用 flex-grow 属性来得到想要的效果

查看代码片段

body {
  margin: 0;
  height: 100%;
}

.donslide {
  display: flex;
  width: 100%;
  height: 400px;
}

.donslide .item {
  background: #ddd;
  transition: 0.6s ease-in-out all;
  overflow: hidden;
  width: 0%;
  flex-grow:1;

}

.center {
  width: 40%;
  background: black;
}

.item:hover {
  width: 60%;
}

<div class="donslide">
  <div class="item"></div>
  <div class="center"></div>
  <div class="item"></div>
</div>