html - 如何水平放置两个 div，其中一个是可折叠的？

Question

在我以 100% 宽度显示的表格单元格中，我试图水平并排显示两个 div。第一个元素应该是可折叠的，一旦折叠，元素 2 应该与空白区域重叠。

如果第一个元素可见，它应该占据 25% 的空间，第二个元素应该占据 75%。

在图像中显示这种情况给出:

以上情况显示第一项和第二项。最下面的就是宽度为 100% 的第二项。

如何在 CSS 中完成此操作？ (其中 f.e. display: none 将触发第二个元素以扩展其宽度)

Answer 1

您可以为此使用媒体查询:

.left-div {
  width: 25%;
}

.right-div {
  width: 75%;
}

@media screen and (max-width: 768px) {
  .left-div {
    width: 0px; || display: none;
  }
  .right-div {
    width: 100%;
  }
}

当屏幕尺寸低于 768px(平板电脑尺寸)时，这将隐藏 left-div 并使 right-div 覆盖整个宽度。