Wie setze ich ein Element unter Flexboxen?

Ich versuche, die Fußzeile unter zwei Flexboxen (rechts & links) zu setzen. Aber mein Code funktioniert nicht richtig. Ist in meinem Code etwas nicht in Ordnung?Wie setze ich ein Element unter Flexboxen?

#all{ 
    position: absolute; 
    width: 55%; 
    margin: 0 auto; 
    display: flex; 
    left: 50%; 
    transform: translateX(-50%); 
} 

#left{ 
    width: 80%; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 

#right{ 
    width: 20%; 
} 

footer{ 
    width: 100%; 
    display: block; 
    clear: both; 
    text-align: center; 
}

Die Zusammenfassung meiner HTML ist unten;

<body> 
    <div id="header"> 
    </div> 

    <div id="all"> 
     <div id="left"> 
     </div> 

     <div id="right"> 
     </div> 
    </div> 
    <footer>some words</footer> 
</body>

Quelle

2017-04-12 Tak

Können Sie Ihren HTML-Code angeben? Oder, es ist besser, ein funktionsfähiges Code-Snippet, JSFiddle oder Codepen einzuschließen. – shaochuancs

Ich habe die Zusammenfassung des HTML hinzugefügt. – Tak

Dies steht nicht im Zusammenhang mit Flex-Box. Die footer wird nicht unter 2 flexboxes (#all) angezeigt, da #all 's Position ist absolute, die es vom Seitenfluss losgelöst macht. Um footer unter #all anzuzeigen, müssen Sie den Code absolute entfernen.

Ich habe eine fiddle für Ihr Codebeispiel gemacht, bitte überprüfen.

Weitere Informationen zu absolute und Seite flow, überprüfen Sie bitte MDN:

Elemente, die relativ zueinander positioniert sind, werden nach wie vor in den normalen Fluss der Elemente in dem Dokument angesehen werden. Im Gegensatz dazu wird ein Element, das absolut positioniert ist, aus der Strömung genommen und nimmt somit keinen Platz ein, wenn andere Elemente platziert werden.

Quelle

2017-04-12 03:51:46 shaochuancs

Vielen Dank! Das hat richtig funktioniert !! – Tak

Wie setze ich ein Element unter Flexboxen?

Antwort

Verwandte Themen