使用CSS在div中定位锚标记

Question

在Wordpress中,我试图仅使用CSS来改变给定主题的一些标准布局.以下标记生成一个div,其中所有子元素从顶部流出(如预期的那样).

问题是我有3个divs并排,并希望按钮(anchor格式化为按钮)始终位于每个对应的底部,div 无论锚点/按钮("我们的团队")前面有多少行文本. ..更多文本"在下面的例子中,但更多的文本为其他2个div).在div具有300像素的固定高度.我希望能够只用CSS做到这一点.我已经看到一些解决方案将锚点包含在跨度或div中,但我真的不鼓励自己编辑主题代码.有没有办法让锚点位于div的底部而不管文本的数量是多少？

编辑:这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

Answer 1

你必须给你的锚定a规则display: block;.锚是inline默认的元素.

如果你给出一个元素position: absolute,你可以将它从所谓的普通文档流中取出来.它将从web浏览器画布(文档区域)开始x和y位置,或者从最近的父元素(具有position: relative或absolute分配给它)开始.

有关详细说明,请参见http://www.w3.org/TR/CSS21/visuren.html#box-gen.