CSS 帮助。打开扩展 div 而不将内容向下推答案

【问题标题】：CSS Help. Open expanding div without pushing content below downCSS 帮助。打开扩展 div 而不将内容向下推
【发布时间】：2020-11-13 01:14:49
【问题描述】：

根据图片，图1为关闭状态。一旦用户在第二个面板中展开绿色 div，下面的内容（蓝色）也会被下推。有没有办法使用 only CSS 我可以打开绿色 div 而不会向下推蓝色内容？

我正在使用第三方组件，所以我无法更改 HTML，所以我只能使用 CSS。

目前这 3 个 div 用 display: flex; flex-wrap: wrap 包裹在另一个 div 中。任何建议将不胜感激

【问题讨论】：

您能否提供一些 HTML 代码，以便我们知道如何使用 CSS？如果这些项目是内容元素的包装器，那么您可以简单地使用 position: absolute 作为内容，这样它就不会在扩展时与流交互。否则我建议使用CSS Grid。

标签： html css web

【解决方案1】：

您应该研究 CSS 网格，它是迄今为止初学者学习使用列和行来调整 div 大小的最佳方式。您必须设置任何 div 的宽度和高度以使其不调整大小，否则内容将仅根据其中的内容移动，这是一个不同的问题。

【讨论】：

【解决方案2】：

css 网格应该可以解决问题

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
  grid-template-columns: auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

【讨论】：