/ / Wie richtet man ein Bild am unteren Rand des div aus? - HTML, CSS, Twitter-Bootstrap, CSS3

Wie richtet man ein Bild am unteren Rand des div aus? - HTML, CSS, Twitter-Bootstrap, CSS3

Ich versuche ein Bild an der Unterseite des Out auszurichten div Element verwenden vertical-align,aber dieses vertical-align scheint nicht zu funktionieren, das Bild bewegt sich überhaupt nicht.

 <div class="row">
<div class="col-md-1">
<img src="/images/../images/image.png" style="height: 20px; width: 20px;cursor:pointer"/>
</div>
<div class=col-md-11 >
<div  style="overflow:auto;height:300px"></div>
</div>
</div>

Ich verwende Bootstrap-Klassen für Alignments. Gibt es etwas, das das Bild machen kann? div auf den Boden des Äußeren ausrichten div? Was nimmt die height von Sekunde div welches ist 300px;.

Antworten:

7 für die Antwort № 1

Wenn ich dich richtig verstehe, sollte so etwas funktionieren:

.parent {
position: relative;
height: 300px;
}

.child {
position: absolute;
bottom: 0;
}

Sie können diese Klassen dem DIV bzw. dem IMG hinzufügen.

Es sieht so aus, als ob das Eltern-Div aufgrund der Höhe, die für das Kind in dem benachbarten Div eingestellt ist, sowieso 300px hoch ist. Wenn Sie stattdessen die Höhe des übergeordneten Elements angeben, können Sie das tun absolut Positionieren Sie die Kind relativ zur Größe der Elternteil.

Wenn Sie das Elternelement nicht als Position: relativ festlegen, wird das Kind relativ zu etwas anderem (wie der Seite) positioniert.

Vertical-Align wird nicht funktionieren, weil der IMG einInline-Element, und das Verhalten, das Sie erwarten, ist abhängig von der Tabellenzelle. Bei Inline-Elementen ist die vertikale Ausrichtung relativ zur Linie und nicht zum übergeordneten Container, sodass ein mit Text ausgerichtetes Bild in verschiedenen Positionen relativ zu einem gegebenen Platz sitzt Textzeile.

Achten Sie darauf, die Dokumentation für diese und andere Fragen zu überprüfen gut erklärt bei MDN.


3 für die Antwort № 2

Sie können flexbox dafür verwenden. Anwenden der übergeordneten Stile auf das DIV. Kein zusätzliches Styling benötigt für img

.parent {
display: flex;
justify-content: flex-end;
flex-direction: column;
}

Hier ist, was Sie hinzufügen möchten, wenn Sie nicht über einen Taskrunner verfügen, der die Präfixe für maximale Kompatibilität hinzufügt.

.parent {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}

Derzeit unterstützen 97% der heute verwendeten Browser flex.