如何让三个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,并且使用spanbottom定位到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/

10-09 17:58
查看更多