如何删除 DIV 容器并保留其内容？

你能在保留 DIV 元素的同时删除它吗？

问题：

你有包含多个元素的 div。当在较小的屏幕上查看时，您需要这些元素显示在其容器 div 之外。目前，您正在复制 HTML 并根据视口大小隐藏一个版本，这不是一种理想的解决方案。有没有更好的方法来实现这个结果？

答案：

是的，可以使用display:contents;

显示：内容； property 是一个较新的属性，它使元素的子元素看起来就像元素父元素的直接子元素一样。换句话说，它在渲染时忽略元素本身。这在像您这样的情况下非常有用，您希望将某些元素保留在一起以用于样式设计，但从文档流中删除容器。

示例：

这里是如何使用 display: content; 的示例删除第一个 div，但将其元素保留在其外部：

.container {
  display: flex;
}

.one {
  display: contents;
}

.one p:first-child {
  order: 2;
}

<div class="container">
  <div class="one">
    <p>Content 1</p>
    <p>Content 3</p>
  </div>
  <p>Content 2</p>
</div>

在此示例中，容器 div 会将其子级排列成一行，而第一个 div 内的 p 元素将排序自己根据 order 属性。第一个 p 元素将出现在第二个 p 元素之后，即使它们在视觉上分组在一个 div 内。

以上是如何删除 DIV 容器并保留其内容？的详细内容。更多信息请关注PHP中文网其他相关文章！