Mit CSS, wie ändere ich die vertikale Reihenfolge der Div-Blöcke?

Question

Ich habe einen Header/Logo mit div Blöcke auf der rechten Seite bekam und links:

.wrap .title-area { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100% 
 
    }

<div class="wrap"> 
 
    <div class="header-left-box"> 
 
    <p>abcd-left box</p> 
 
    </div> 
 
    <div class="title-area"> 
 
    <p>abcd-header</p> 
 
    </div> 
 
    <div class="header-right-box"> 
 
    <p>abcd right box</p> 
 
    </div> 
 
</div>

ich gestylt es mit 30%, 40%, 30% Breite und jeder hat schweben: verließ, um die Ergebnisse zu geben, die ich brauche. Bei reduzierter Bildschirmgröße gebe ich jeder Div-Box 100% Breite, damit sie stapeln. Aber weil ich die Logo-Box an der Spitze möchte, gebe ich den Stil.

Das bringt die Kopfzeile an die Spitze, aber die Kopfzeile-links-Box bleibt auch an der Spitze, unter der Kopfzeile. Wie kann ich diese nach Bedarf arrangieren, ohne dass sie sich überschneiden?

Answer 1

Sie können dies mit flex erreichen. Für die verkleinerte Bildschirmgröße können Sie diese zusätzlich nutzen

Answer 2

Wenn ich Sie richtig verstehe, denke ich, dass Sie Flexbox nutzen können. Der Link zu einem guten Tutorial ist here. Überprüfen Sie den Abschnitt "Reihenfolge", da Sie eine numerische Reihenfolge angeben können, wie sie gestapelt werden sollen.

.item { 
    order: <integer>; 
} 

Es wird nicht in allen älteren Browsern unterstützt.

Answer 3

Es gibt keine Notwendigkeit, hier für position: absolute ist, können Sie Flexbox stattdessen verwenden und um von Elementen mit Medienabfrage Fiddle

.wrap { 
 
    display: flex; 
 
} 
 
.title-area { 
 
    flex: 4; 
 
    background: lightblue; 
 
} 
 
.header-left-box, 
 
.header-right-box { 
 
    flex: 3; 
 
    background: lightgreen; 
 
} 
 
@media(max-width: 480px) { 
 
    .wrap { 
 
    flex-direction: column; 
 
    } 
 
    .title-area { 
 
    order: 1; 
 
    } 
 
    .header-left-box, 
 
    .header-right-box { 
 
    order: 2; 
 
    } 
 
}

<div class="wrap"> 
 
    <div class="header-left-box"> 
 
    <p>abcd-left box</p> 
 
    </div> 
 
    <div class="title-area"> 
 
    <p>abcd-header</p> 
 
    </div> 
 
    <div class="header-right-box"> 
 
    <p>abcd right box</p> 
 
    </div> 
 
</div>

Answer 4

in allen Browsern Für volle Unterstützung ändern, können Sie tun die folgenden:

.wrap{ 
    display: table; 
} 

.header-left-box{ 
    width: 100%; 
} 

.title-area{ 
    width: 100%; 
    display: table-header-group; 
} 

.header-right-box{ 
    width: 100%; 
} 

https://jsfiddle.net/iamnottony/kpmt3Ly8/6/

Answer 5

Moderne Browser

Die beste Lösung für dieses Problem ist CSS Flexbox zu verwenden. Wie Sie leicht auf caniuse.com überprüfen können, wird es tatsächlich in allen neuen Browsern (und in ihren vorherigen Versionen auch!) Unterstützt. Damit für diesen Browser ist die komplette Arbeitslösung auf nur drei Zeilen Code für die mobile Version hinzufügen:

.wrap { 
    display:flex; 
    flex-direction: column; 
} 

.title-area { 
    order: -1; 
} 

Und dies entsprechend für die Desktop-Version anpassen. Siehe diese Geige: https://jsfiddle.net/MMiszy/t4L0r15t/1/

Sie können mehr von the tutorial lernen.

Was ist, wenn ich ältere Browser unterstützen muss?

Wenn Sie jedoch aus irgendeinem Grund ältere Browser unterstützen müssen, können Sie trotzdem flexbox verwenden! Sie können sogar Floats für Ihre Desktop-Version verwenden und nur die mobile Version Ihrer Website mit flexbox anpassen, wenn Sie möchten. Um ältere Browser zu unterstützen, verwenden Sie ein Tool namens Autoprefixer. Es transformiert automatisch Ihre Stile und ändert sie, wann immer es möglich ist, dass sie in älteren Browsern funktionieren.Zum Beispiel wird in diesem Fall display: flex; geändert

display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 

So ist es auch in Legacy-Browsern funktioniert. Sehen Sie diese Geige zum Beispiel Implementierung. Es verwendet Floats für den Desktop und Flexbox für das Handy: https://jsfiddle.net/MMiszy/d6paasu2/3/