如何使用 CSS 刪除 DIV 元素，同時保留其內容？

在保留內容的同時刪除DIV 元素

在某些情況下，您可能想要刪除DIV 元素，但將巢狀元素保留在DIV 外部進行響應式安排。常見的方法是複製 HTML 並根據視口大小隱藏它，但有更有效的解決方案。

顯示的力量：內容

利用 CSS 屬性display:contents 來實現這種彈性。 display:contents 使元素的子元素繞過元素本身並顯示為父元素的直接子元素。

範例實作

在保留的同時刪除 DIV其元素，將 display:contents 套用於要刪除的 DIV。例如，考慮以下HTML 結構：

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

要刪除「一個」DIV 並將其內容放置在容器外部，請實作以下CSS：

.container {
  display: flex;
}
.one {
  display: contents;
}

使用此方法，「內容1”段落將出現在容器外部，保留不同螢幕尺寸的預期佈局。

的好處display:contents

• 保留內容層次結構，同時使其靈活地適應各種容器。
• 消除了重複和手動隱藏 HTML 的需要。
• 簡化透過減少不必要的元素來編寫程式碼並提高效能。

以上是如何使用 CSS 刪除 DIV 元素，同時保留其內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！