Html 将 div 的内容与底部对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10369081/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align contents of div to the bottom
提问by F21
I have a div containing 2 paragraphs. I want the paragraphs to be aligned to the bottom right of the div. I was able to align the paragrams using text-align: right, but I am struggling with trying to get the paragrams to align to the bottom of the div.
我有一个包含 2 个段落的 div。我希望段落与 div 的右下角对齐。我能够使用 对齐参数text-align: right，但我正在努力使参数与 div 的底部对齐。
The markup is quite simple:
标记非常简单：
<div>
<p>content 1</p>
<p>content 2</p>
</div>
CSS:
CSS：
div{
border: 1px red solid;
height: 100px;
}
p{
text-align: right;
}
I tried using position:absoluteon the paragrams and setting bottom: 0, but this makes the paragraphs overlap each other due to the absolute positioning.
我尝试position:absolute在 paragrams 和 setting 上使用bottom: 0，但是由于绝对定位，这使得段落彼此重叠。
The div does not span the whole page, so the paragraph text should be contrained within the div.
div 不会跨越整个页面，因此段落文本应限制在 div 内。
Is there a way to achieve the effect such that the content "grows from the bottom"?
有没有办法达到让内容“自下而上”的效果？
The effect I want is like this (photoshopped):
我想要的效果是这样的（photoshopped）：
And a fiddle of the above: http://jsfiddle.net/cbY6h/
和上面的小提琴：http: //jsfiddle.net/cbY6h/
回答by Bill
HTML
HTML
<div class="box">
<div class="content">
<p>content 1</p>
<p>content 2</p>
</div>
</div>?????????????????????
CSS
CSS
.box {
border: 1px red solid;
height: 100px;
position: relative;
}
.content {
position: absolute;
bottom: 0;
right: 0;
}
Will place the content in the bottom right hand corner of the div. You can see the result at http://jsfiddle.net/cbY6h/1/.
将内容放在 div 的右下角。你可以在http://jsfiddle.net/cbY6h/1/看到结果。
回答by Frison Alexander
I was looking for something similar, and ended up using flexbox layout.
我正在寻找类似的东西，最终使用了 flexbox 布局。
Given the following structure
鉴于以下结构
<div>
<p>content 1</p>
<p>another</p>
<p>content 2</p>
</div>
and this style
还有这种风格
div {
border: 1px red solid;
height: 100px;
display: flex;
//align items from top to bottom
//[I've always thought the opposite, as rows are counted from top to bottom
//and columns are counted left to right. Any one have an explanation for this?]
flex-direction: column;
//main axis align to the bottom, since we are using column for direction
justify-content: flex-end;
}
p {
//cross axis align towards the right. total outcome => bottom right
align-self: flex-end;
}
You will get the layout from the picture.
您将从图片中获得布局。
Edit: Won't work on older browsers (http://caniuse.com/flexbox). You can key of Modernizer
编辑：不适用于旧版浏览器 ( http://caniuse.com/flexbox)。您可以使用 Modernizer
.flexbox .rest-of-your-selector { rule }
回答by Blake
A key note to understand. If you were to change the height of the "box" to 100% instead of 100px, then it would not work. If height is not specified as a specific unit of measure it can't figure out how to place the absolute child item.
需要理解的关键注释。如果您要将“框”的高度更改为 100% 而不是 100px，那么它将不起作用。如果未将高度指定为特定的度量单位，则无法确定如何放置绝对子项。
.box {
border: 1px red solid;
height: 100%;
position: relative;
}
回答by Daniel Brennan
Use relative instead of absolute for position of .content.
.content 的位置使用相对而不是绝对。
