DIV コンテナの内容を保持したまま削除するにはどうすればよいですか?

要素を保持したまま DIV を削除できますか?

質問:

複数の要素を含む div。小さな画面で表示する場合、これらの要素はコンテナ div の外側に表示される必要があります。現在、HTML を複製し、ビューポート サイズに基づいて 1 つのバージョンを非表示にしていますが、これは理想的な解決策ではありません。この結果を達成するためのより良い方法はありますか?

答え:

はい、display:contents; を使用できます。

表示: コンテンツ; property は、要素の子を要素の親の直接の子であるかのように表示する新しいプロパティです。つまり、レンダリング時に要素自体は無視されます。これは、あなたのようなケースで、スタイル設定のために特定の要素をまとめておきたいが、ドキュメント フローからコンテナを削除したい場合に便利です。

例:

ここにあります。 display:contents; の使用例。 1 つの 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 はその子を一列に配置し、1 つの div 内の p 要素は順序付けされます。それ自体は順序プロパティに従っています。最初の p 要素は、視覚的に 1 つの div 内でグループ化されている場合でも、2 番目の p 要素の後に表示されます。

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