html - 调整大小时使 3 列变为 Accordion

Question

当在智能手机上查看时，我需要将 3 列页面的显示变成 Accordion 。我查看过是否有任何示例或教程，但我没有遇到任何示例或教程。我发现将选项卡更改为 Accordion ，但是，这是一个具有 3 列的基本页面，当将其调整为较小的屏幕尺寸时，它需要更改为 Accordion 。任何链接或建议将不胜感激。

Answer 1

你可以使用flexbox来做到这一点

.container {
  display: flex;
}

.container > div {
  flex: 1;
  height: 150px;
  border: 1px solid gray;
  transition: flex 0.5s;
}


@media screen and (max-width: 800px) {
  .container > div {
    flex: 0;
  }
  .container > div:nth-child(1) {
    flex: 1;
  }
  .container:hover > div {
    flex: 0;
  }
  .container > div:hover {
    flex: 1;
  }
}

    <div class="container">
      <div class="left">Left</div>
      <div class="middle">Middle</div>
      <div class="right">Right</div>
    </div>