Wie richtet man Elemente verschiedener übergeordneter Elemente in CSS ohne JavaScript vertikal aus?

CSS – So richten Sie Kinder verschiedener Elternteile vertikal aus

Um Kinder verschiedener Elternteile vertikal auszurichten, ohne JavaScript zu verwenden, machen Sie sie zu Geschwistern und verwenden Sie sie Flexbox, um deren Reihenfolge und Flexbasis zu steuern. So erreichen Sie dies:

Aktualisierter Code:

<code class="css">@media (min-width: 768px) {
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .content > * {
    flex-basis: calc(50% - 30px);
  }

  .content h2 {
    order: 0;
  }
  .content p {
    order: 1;
  }
  .content p + p {
    order: 2;
    flex-basis: calc(100% - 30px);
  }
  .content ul {
    order: 3;
  }
}</code>

HTML-Code:

<code class="html"><div class="content">
  <h2>Lorem ipsum Lorem ipsum</h2>
  <p>...</p>
  <p>...</p>
  <ul class="check">...</ul>
  <h2>Lorem ipsum</h2>
  <p>...</p>
  <ul class="check">...</ul>
</div></code>

Erklärung:

• Auf Bildschirmen, die breiter als 768 Pixel sind, wird der Inhalt als flexible Elemente angezeigt, deren Reihenfolge durch die Auftragseigenschaften bestimmt wird.
• flex-basis legt die Breite von fest jedes Element, aber für das leere p-Element ist eine Breite von 100 % festgelegt, um sicherzustellen, dass es den verfügbaren Platz ausfüllt.
• Indem die Elemente zu Geschwistern innerhalb des Inhalts-Divs gemacht werden, können sie vertikal ausgerichtet werden.
• Passen Sie die Haltepunkte in der Medienabfrage bei Bedarf so an, dass sie mit denen von Bootstrap übereinstimmen.
• Sie können den Elementen mithilfe von Rahmeneigenschaften auch Rahmen hinzufügen und diese mit den Medienabfragen anpassen, um sowohl die vertikale als auch die horizontale Ausrichtung zu unterstützen.

Das obige ist der detaillierte Inhalt vonWie richtet man Elemente verschiedener übergeordneter Elemente in CSS ohne JavaScript vertikal aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!