Ik heb geprobeerd mijn tekst uit te lijnen naar de onderkant van een div van andere berichten en antwoorden in stapeloverloop die ik heb geleerd om dit te behandelen met verschillende CSS-eigenschappen. Maar ik kan het niet krijgen. In principe is mijn HTML-code als volgt:
<div style='height:200px; float:left; border:1px solid #ff0000; position:relative;'>
<span style='position:absolute; bottom:0px;'>A Text</span>
</div>
Antwoord 1, Autoriteit 100%
Flex-oplossing
Het is perfect goed als u met de display: table-cell
oplossing. Maar in plaats van het uit te hacken, hebben we een betere manier om hetzelfde te bereiken met display: flex;
. flex
is iets dat een fatsoenlijke ondersteuning .
.wrap {
height: 200px;
width: 200px;
border: 1px solid #aaa;
margin: 10px;
display: flex;
}
.wrap span {
align-self: flex-end;
}
<div class="wrap">
<span>Align me to the bottom</span>
</div>
Antwoord 2, Autoriteit 36%
U kunt dit nu doen met FLEXBOX justify-content: flex-end
NU:
div {
display: flex;
justify-content: flex-end;
align-items: flex-end;
width: 150px;
height: 150px;
border: solid 1px red;
}
<div>
Something to align
</div>