如何刪除 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中文網其他相關文章！