将div的内容与底部对齐

我有一个包含2段的div。我希望段落对齐div的右下角。我可以使用text-align: right来对齐这些图表，但我正努力尝试让这些图表对齐到div的底部。将div的内容与底部对齐

标记是相当简单：

<div> 
    <p>content 1</p> 
    <p>content 2</p> 
</div>

CSS：

div{ 
    border: 1px red solid; 
    height: 100px; 
} 

p{ 
    text-align: right; 
}

我试着用在paragrams position:absolute和设置bottom: 0，但是这使得段落相互重叠，由于绝对定位。

div不跨越整个页面，所以段落文本应该在div内被约束。

有没有办法达到这样的效果，使内容“从底部增长”？

我想要的效果是这样的（Photoshop处理）： enter image description here

和上面的小提琴：http://jsfiddle.net/cbY6h/

来源

2012-04-29 F21

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; 
}

威尔将内容放置在botto中m的右上角。你可以在http://jsfiddle.net/cbY6h/1/看到结果。

来源

2012-04-29 02:12:41 Bill

设置位置，以绝对的拿出来在各段重叠其他内容:(box'的'宽度的内容的流量和结果的不应该是固定的作为其兄弟的div可以有任意宽度，但是在兄弟姐妹的宽度已经被计入之后，它被限制在父母身上。 – F21 2012-04-29 02:22:12

比尔的答案似乎满足了你的问题的条件。如果还有其他因素需要考虑，请相应编辑您的问题。 – j08691 2012-04-29 02:31:59

优秀答案+1 – jhamPac 2015-02-17 04:42:12

-1

使用relative而不是absolute作为.content的位置。

来源

2013-01-18 00:00:25

需要了解的重要注意事项。如果您要将“框”的高度更改为100％而不是100像素，则无法工作。如果未将高度指定为特定度量单位，则无法确定如何放置绝对子项目。

.box { 
border: 1px red solid; 
height: 100%; 
position: relative; 
}

来源

2013-02-21 06:12:39 Blake

我正在寻找类似的东西，并最终使用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 }

来源

2014-03-12 19:59:50

将div的内容与底部对齐

回答

相关问题