Kann Flexbox eine dynamische Neuordnung erreichen, ohne die SEO zu beeinträchtigen?

Nur ​​CSS-Nachbestellung mit Flexbox

Herausforderung:

Eine Suchmaschine pflegen- freundliche und semantische DOM-Struktur, während Elemente an bestimmten Positionen ohne unnötige Duplizierung angezeigt werden.

Layoutanforderungen:

• Flexbox-basiertes Layout mit vertikaler Zentrierung auf Desktops
• Keine bekannten oder festen Höhen
• Tag-Team-Verhalten für die rechte Spalte auf Desktops
• Unterstützung für IE11

Machbarkeit:

Nur-CSS-Lösung:

Leider unterstützt die reine CSS-Flexbox solche komplexen Neuordnungen nicht nativ. Durch die Verwendung fester Höhen ist jedoch ein Kompromiss möglich:

<code class="css">.flex {
  height: 90vh;
  flex-flow: column wrap;
}
.flex div {
  flex: 1;
  width: 50%;
}
.flex div:nth-child(2) {
  order: -1;
}</code>

JS-basierte Lösung:

Alternativ können Sie das grüne Div ausschneiden und seinen Inhalt einfügen in das rosafarbene mit JavaScript. Dieser Ansatz kann zu Leistungs- und Flackerproblemen führen, kann aber auf bestimmte Szenarien zugeschnitten werden.

Beispiel mit festen Höhen:

Der folgende Code zeigt ein funktionierendes Nur-CSS Lösung mit festen Höhen:

<code class="css">.flex {
  height: 90vh;
}</code>

Das obige ist der detaillierte Inhalt vonKann Flexbox eine dynamische Neuordnung erreichen, ohne die SEO zu beeinträchtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!