Question

我正在使用CSS来对齐我的文本（这只是一个“阅读更多”链接）在我的预览文章框的底部，它具有标准高度。 “阅读更多”链接现在显示在预告片文本的下方，我需要将其放置在文章框底线上方几个像素，与文本高度无关，如下所示

___________________________
|
|
|
|
|
|              read more >>
|___________________________

你能给我一些想法或例子吗？

此致乔治

Answer 1

将您的文章元素设置为position:relative，然后将了解更多链接设置为position:absolute，以便您可以使用{{1}将其置于文章中} / bottom css properties ..

示例http://www.jsfiddle.net/gaby/7bduy/

Answer 2

我很长一段时间没有使用过Javascript，但是在“相关”部分，有一个链接可以帮助您：CSS: fixed to bottom and centered

Answer 3

您可以相对定位文本。

在css中：

#selectorName{
    position:relative;
    left: 10px;
    top:10px;
    bottom:10px;
    right:10px;
}

这将允许您根据文档流程规则相对于它应该位于的位置移动框中的链接。

Answer 4

如果您的文章“文字”是固定尺寸，请执行以下操作：

<div class="article">
<div class="readmore"><a href="#">read more ></a>
</div>

CSS：

.article 
{
position relative;
width: 300px;
height: 100px;
}
.readmore
{
position:absolute;
z-index:3;
width:50px;
height:25px;
right:0px;
top:280px;
}

......或类似的东西：）

使用CSS在多个框的底部创建一个固定文本

4 个答案: