Wie kann ich einen DIV-Container entfernen und dabei seinen Inhalt behalten?

Können Sie ein DIV entfernen und dabei seine Elemente beibehalten?

Frage:

Das haben Sie ein div, das mehrere Elemente enthält. Sie müssen diese Elemente außerhalb ihres Container-Divs anzeigen, wenn sie auf kleineren Bildschirmen angezeigt werden. Derzeit duplizieren Sie den HTML-Code und verbergen eine Version basierend auf der Größe des Ansichtsfensters, was keine ideale Lösung ist. Gibt es einen besseren Weg, dieses Ergebnis zu erzielen?

Antwort:

Ja, Sie können die Anzeige verwenden: Inhalte; Eigenschaft, um den gewünschten Effekt zu erzielen.

Die Anzeige: Inhalt; Die Eigenschaft ist eine neuere Eigenschaft, die dafür sorgt, dass die untergeordneten Elemente eines Elements so aussehen, als wären sie direkte untergeordnete Elemente des übergeordneten Elements. Mit anderen Worten: Beim Rendern wird das Element selbst ignoriert. Dies kann in Fällen wie Ihrem nützlich sein, in denen Sie bestimmte Elemente zu Gestaltungszwecken zusammenhalten, aber den Container aus dem Dokumentenfluss entfernen möchten.

Beispiel:

Hier ein Beispiel dafür, wie Sie display:contents; So entfernen Sie das eine Div, behalten aber seine Elemente außerhalb davon:

.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>

In diesem Beispiel ordnet das Container-Div seine untergeordneten Elemente in einer Reihe an und die p-Elemente innerhalb des einen Div werden in der richtigen Reihenfolge angeordnet sich entsprechend der Auftragseigenschaft. Das erste p-Element erscheint nach dem zweiten p-Element, auch wenn sie visuell innerhalb einer Abteilung gruppiert sind.

Das obige ist der detaillierte Inhalt vonWie kann ich einen DIV-Container entfernen und dabei seinen Inhalt behalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!