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 回答