使用CSS在div中定位锚标签

Question

在WordPress中，我试图仅使用CSS更改给定主题的一些标准布局。以下标记产生一个带有所有子元素从顶部流出的div（如预期）。

问题在于，我有3个这样的

并排放置，并希望按钮（格式为按钮的锚点）始终位于各自的

底部，无论前面有多少行文本（在下面的示例中是“Our team... more text”，但其他2个

的文本要多得多）。该

的高度固定为300px。我希望能够仅使用CSS实现此目的。我看到了一些解决方案，将锚点包装在span或div中，但我真的不鼓励自己编辑主题代码。是否有任何方法可以使锚点位于

底部，而不管文本量如何？

编辑：此

仅是给定页面上内容的一小部分。它不是唯一的标记。

<div class="widget-front">
    <h2>The Team</h2>
    <p class="fp-text-one">Our team ...more text</p>
    <a class="btn btn-primary fp-button" href="http://www.mysite.com/the-team/" title="The Team">Read more ...</a>
</div>

我有一个选择器：

.widget-front > a {
    XXX
}

虽然可以正确识别按钮，但我似乎无法使锚点/按钮位于div底部..

对于XXX，我尝试了以下方法（但都失败了）：

1. position: absolute;
bottom:0

2. position: relative

3. position: relative
bottom:0

4. vertical-align: bottom

- Joel Themmen

---

你需要给锚点 a 添加规则 display: block;。默认情况下，锚点是内联元素。 - undefined

@VolkerE. 当我这样做并且将 "position: absolute; bottom:0" 结合在一起时，按钮会被移动，但当我调整页面大小时，按钮会漂出这个 div。我可能应该更清楚地说明这个 Div 位于很多 WordPress 代码之内。 - undefined

请发布一个完整的代码示例，包括所有相关div元素的HTML和CSS。 - undefined

@JoelThemmen 如果你给一个元素设置了 position:absolute，那么它将脱离所谓的文档流。 它会根据网页浏览器画布（即文档区域）或最近的具有 position: relative 或 absolute 属性的父元素来确定其 x 和 y 位置。 - undefined

@VolkerE. 哇，太棒了 - 修复了一切。非常简单。我该如何将您的答案标记为正确答案？ - undefined

@JoelThemmen 看看我的回答，稍后我会添加一个链接到W3C网站。如果你对我的帮助表示赞赏，请接受并点赞。 :) - undefined

Answer 1

你必须给你的锚点a添加 display:block; 规则。默认情况下，锚点是inline元素。

如果你给一个元素设置了position: absolute ，它将脱离文档流。它会从网页浏览器画布（文档区域）或最近的父元素开始定位x和y位置，该父元素已分配position:relative或absolute属性。

更详细的解释请参见http://www.w3.org/TR/CSS21/visuren.html#box-gen。

- Volker E.

---

我没有足够的声望来点赞，但是我会把它标记为解决方案。再次感谢。 - undefined