CSS 文本对齐容器底部答案

【问题标题】：CSS Text Align Bottom of ContainerCSS 文本对齐容器底部
【发布时间】：2012-01-14 06:56:46
【问题描述】：

我有一个标题，它的一侧漂浮着一张大图像，另一侧漂浮着一小段文字。我希望段落从标题 div 的底部开始。如果段落中有 5 行，我希望最后一行位于标题的底部。我无法让段落在此处对齐。

我有这样的事情：

<div id='header'>

     <img id='logo' />

     <p id='quote'></p>

</div>

CSS 是：

div#header {
    height: 200px;
}

div#header img#logo {
    float: left;
}

p#quote {
    float: left;
}

【问题讨论】：

那么你想让所有东西都排在左边，还是什么？

标签： html css

【解决方案1】：

http://jsfiddle.net/danheberden/ymwPe/

<div id="container">
    <div id="gonnaBeOnTheBottom">
        <p>Hi there!</p>
        <p>I'm on the bottom!</p>
    </div>
</div>

css:

#container {
    background: #EEE;
    height:400px;
    width:400px;
    position:relative;
}
#gonnaBeOnTheBottom {
    position:absolute;
    bottom:0;
}

通过在父容器上设置position:relative，您可以绝对定位其中的元素:)

【讨论】：

【解决方案2】：

更现代的方法是使用 flexbox，这极大地简化了之后的响应式工作：

容器上的display:flex
flex-direction: column会从上到下分发孩子
margin-top: auto 到你想粘在底部的元素，flex 会应用上面的所有空闲空间

#container {
  background: #eaeaea;
  height:180px;
  display: flex;
  flex-direction: column;
}

#bottom {
  border: 1px solid blue;
  margin-top: auto;
}

<div id="container">
    Whatever content
    <div id="bottom">Will stick to bottom</div>
</div>

【讨论】：

【解决方案3】：

我最近遇到了一个垂直居中的技巧，我可以对其进行调整以达到此目的： http://codepen.io/Bushwazi/pen/VYBBmL

parent {
  height: 200px;
}
child {
  position: relative;
  top: 100%;
  transform: translateY(-100%);
  display block
}

**需要指出浏览器需要支持CSS3 transform:http://caniuse.com/#search=transforms

【讨论】：

您的 codepen 的代码（使用 flexbox）与这个答案完全不同，这不起作用。
我想我没有完全理解这个问题。我认为目标是将vertical-align 的文本放在父级的底部。希望这对像我一样在这里寻找答案的其他人有所帮助。

【解决方案4】：

我对您的代码进行了一些更改。试试这个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>


div#header {
height:200px;
}

div#header img#logo {
float:left;
}

.header p {
float:left
}

</style>
</head>
<body>

<div id='header'>

     <img id='logo' src="../Pictures/myfarm.PNG" width="220" height="130" />

 <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
  <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
   <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
    <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>
     <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p>

</div>
</body>
</html>

【讨论】：