CSS を使用してコンテンツを保持したまま DIV 要素を削除するにはどうすればよいですか?

コンテンツを保持しながら DIV 要素を削除する

特定のシナリオでは、DIV 要素を削除しても、ネストされた要素は DIV の外側に残しておきたい場合があります。応答性の高い手配のために。一般的なアプローチには、HTML を複製し、ビューポート サイズに基づいて非表示にすることが含まれますが、より効率的な解決策が存在します。

display:contents の力

CSS プロパティを活用するこの柔軟性を実現するには、display:content を使用します。 display:contents を使用すると、要素の子が要素自体をバイパスし、親要素の直接の子として表示されます。

実装例

保持しながら DIV を削除するにはその要素を削除するには、display:content を削除する DIV に適用します。たとえば、次の HTML 構造について考えてみましょう。

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

「1 つの」 DIV を削除し、そのコンテンツをコンテナの外に配置するには、次の CSS を実装します。

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

このアプローチでは、「コンテンツ 1」段落はコンテナの外側に表示され、さまざまな画面サイズに対して意図したレイアウトが維持されます。

利点display:contents の

• コンテンツ階層を維持しながら、さまざまなコンテナに柔軟に対応します。
• HTML の複製や手動での非表示の必要がなくなります。
• 不要な要素を減らすことでコードを簡素化し、パフォーマンスを向上させます。

以上がCSS を使用してコンテンツを保持したまま DIV 要素を削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。