覆盖我 CSS 垂直手风琴部分的宽度

Question

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

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

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

但是，最后一个 div 没有像我想要的那样展开，因为我的项目的初始宽度设置为 30%:

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>

我怎样才能让我的手风琴工作同时保持甜蜜的过渡？

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>

覆盖我 CSS 垂直手风琴部分的宽度

Override width of part of my CSS vertical accordeon

html

css

transition

width