将div的内容与底部对齐
将div的内容与底部对齐
提问于 2012-04-29 09:54:46
我有一个包含2个段落的div。我希望段落与div的右下角对齐。我能够使用text-align: right对齐模版，但我正在努力让模版对齐到div的底部。
标记非常简单：
<div>
<p>content 1</p>
<p>content 2</p>
</div>CSS：
div{
border: 1px red solid;
height: 100px;
}
p{
text-align: right;
}我试着在模版图上使用position:absolute并设置bottom: 0，但由于绝对位置的原因，这使得段落相互重叠。
div不会跨越整个页面，因此段落文本应该限制在div中。
有没有办法达到这样的效果，让内容“从底部生长”？
我想要的效果是这样的(photoshopped)：
和上面的一些小提琴：http://jsfiddle.net/cbY6h/
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-04-29 10:12:41
HTML
<div class="box">
<div class="content">
<p>content 1</p>
<p>content 2</p>
</div>
</div>CSS
.box {
border: 1px red solid;
height: 100px;
position: relative;
}
.content {
position: absolute;
bottom: 0;
right: 0;
}将内容放在div的右下角。你可以在http://jsfiddle.net/cbY6h/1/上看到结果。
Stack Overflow用户
发布于 2014-03-13 03:59:50
我一直在寻找类似的东西，最终使用了flexbox布局。
给定以下结构
<div>
<p>content 1</p>
<p>another</p>
<p>content 2</p>
</div>这种风格
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;
}您将从图片中获得布局。
编辑:不适用于旧版浏览器(http://caniuse.com/flexbox)。你可以为现代人设置密钥
.flexbox .rest-of-your-selector { rule }Stack Overflow用户
发布于 2013-02-21 14:12:39
要理解的一个关键注意事项。如果你将“盒子”的高度改为100%而不是100px，那么它将不起作用。如果没有将height指定为特定的度量单位，它就无法确定如何放置绝对子项目。
.box {
border: 1px red solid;
height: 100%;
position: relative;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10369081
复制相关文章
相似问题
腾讯云开发者
