如何让三个div看起来像下面所示,只有HTML和CSS?是否可以使底部文本保持在最长文本下对齐?
<html>
<div id=1>
Short text
Bottom text?
</div>
<div id=2>
Long text
Bottom text?
</div>
<div id=3>
Not so long text
Bottom text?
</div>
</html>
最佳答案
正如@Ruddy所指出的,感谢您的帮助,我使用了Flexbox方法,使用CSS定位,使用display: flex;
作为父元素,并将底部文本包装成span
,并且使用span
将bottom
定位到position: absolute;
也不必像我们使用的height
那样,为容器分配固定的display: flex;
Flex Demo
div.parent {
display: flex;
}
div.parent > div {
border: 4px solid #000;
width: 33%;
float: left;
position: relative;
padding-bottom: 30px; /* Make sure you tweak this, to the
highest height of your bottom content*/
}
div.parent > div > span {
position: absolute;
bottom: 0;left: 0;
}
显然,您可以使用
position: absolute;
和bottom: 0;
和padding-bottom: 30px;
(近似值)并将底部文本包装成span
并对container元素使用position: relative;
,但同样,您将无法拉伸其他两个没有height
的容器,因此它将失败。因此,您需要将
display: table-cell;
与vertical-align: bottom;
一起使用,它将继续将文本推送到包含内容的bottom
中,并且,vertical-align: bottom;
将确保即使是其他容器的文本也会粘到bottom
Demo
div.parent {
display: table;
}
div.parent > div {
border: 4px solid #000;
width: 33%;
display: table-cell;
vertical-align: bottom;
}
关于html - 在div中对齐文本,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20840093/