如何将两个div水平放置在彼此旁边，其中一个是可折叠的？

Question

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

如果第一个元素可见，则应占用25％的空间，第二个元素占75％。

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

以上情况显示第一项和第二项。底部的那个只是第二个项目，宽度为100％。

如何在CSS中完成此操作？ （其中f {。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%;
  }
}

当屏幕尺寸低于768像素（平板电脑尺寸）时，这会隐藏left-div并使right-div覆盖整个宽度。