0

我有一个 h2 作为容器 div 中的唯一项目。我设法让它与容器底部对齐,使用容器上的 position:relative 和 h2 上的 position: absolute / bottom:0 。但是,我无法让 h2 文本与容器 div 的右侧对齐。

HTML:

<div id="section"><h2>About Us</h2></div

CSS:

#section {
    width:277px;
    height:89px;
    position:relative;
    background-image:url(../img/sect-title-bg.png);
    background-repeat:repeat-x;
    margin:-12px 0px 0px 0px;
}

#section h2 {
    text-align:right;
    margin:0;
    position:absolute;
    bottom:0px;
}

链接:http ://www.distributionaccess.com/new/stempath/about.html

我在 h2 上尝试了 display:inline-block,但没有结果。

也许有更好的方法来处理整个“将 h2 与其容器 div 的右下角对齐”的事情,这就是我在这里所做的一般。我正在寻求解决方案/建议!

4

3 回答 3

1

在您的#section h2规则中添加right:0和删除text-align:right. 文本实际上是右对齐的,但是通过定位绝对是您缩小 div 包装以匹配内容,因此您看不到它。

于 2013-09-19T15:41:49.750 回答
0

摆脱position:absolute你的 h2,这会阻止它成为普通的块级元素,因此 text-align 不会按预期工作。正如评论者所指出的,这将影响垂直定位。

否则扩大 h2 的宽度:

 h2 { width:280px; }

或设置right属性:

 h2 {right:0;}
于 2013-09-19T15:41:36.740 回答
0

它超出了文档流添加宽度 277px

于 2013-09-19T15:42:22.230 回答