CSS-Positionierung unten ohne absolute Positionierung

Question

Wie kann ich ein Element so positionieren, dass es sich immer auf dem Boden des Containers befindet, ohne "absolute" Positionierung zu verwenden? Ich habe einen Container mit 2 Elementen und einer von ihnen ist Textbeschreibung, so dass es so groß wie der Text sein kann. Ich möchte zweites Element am unteren Rand der Seite positionieren, unabhängig davon, ob der Text im vorherigen div leer ist, und wenn Text nicht leer ist, möchte ich 10px zwischen ihnen haben

Answer 1

Aktualisiert: JSFiddle mit flexbox, um Ihren Code angewendet.

https://jsfiddle.net/ec7qxtfr/1/

flexbox können Sie dies erreichen helfen. Fügen Sie Ihrem übergeordneten Container Folgendes hinzu.

Das nächste Bit ist für die 10px Polsterung, die Sie wollten. Dies zielt auf das erste untergeordnete Element im Container ab.

.child:first-child { 
    padding-bottom: 10px; 
} 

Solange das erste Kind div vorhanden ist, auch wenn Sie keinen Inhalt (keine Ziffern), die zweite div noch auf den Boden des Behälters dank flexbox geschoben werden. Ebenso können Sie die Eigenschaft height auskommentieren, um zu überprüfen, ob die padding zwischen den beiden untergeordneten Elementen vorhanden ist.

Überprüfen Sie den JSFiddle unten. Sie können die Höhe im übergeordneten Container anpassen, um zu bestätigen, dass das zweite Div am unteren Ende des Containers bleibt.

https://jsfiddle.net/o3r40keu/5/

Hinweis: Diese Lösung wird vorausgesetzt, dass Sie nur zwei untergeordnete Elemente in diesem übergeordneten Container haben.

Ich hoffe, das hilft!

Answer 2

Sie können flexbox verwenden. Wenn Sie den Behälter zu

.container-class { 
    display: flex; 
    flex-direction: column; 
} 

Sie dann das Kind Rand oben nach auto einstellen.

.child { 
    margin-top: auto; 
} 

Die HTML könnte wie folgt aussehen:

<section class="container-class"> 
    <p class="child">...</p> 
</section> 

Sie könnten eine bestimmte Höhe auf dem Behälter festlegen müssen dafür arbeiten, aber der Kern der Lösung Flexbox + margin-top verwendet: Auto auf das Element, das Sie an der Unterseite bleiben möchten. Das Padding und andere Stile, die Sie erreichen möchten, sollten wie erwartet funktionieren, keine Tricks.

Beachten Sie, dass Sie Ihre Flexbox Requisiten Präfix benötigen, das heißt:

display: -webkit-box; 
display: -ms-flexbox; 
display: flex; 
-webkit-box-orient: vertical; 
-webkit-box-direction: normal; 
    -ms-flex-direction: column; 
     flex-direction: column;