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

发布于 2024-09-30 11:23:47 字数 273 浏览 1 评论 0原文

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

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

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

问候，乔治

原文

I am using CSS to align my text (which is just a "read more" link) at the bottom of my preview article boxes which have a standard height. The "read more" link now show up just below of the teaser text and I need to position it just a few pixels above the bottom line of the article box independently of the text height, like this

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

Can you please give me some ideas or examples ?

Regards,
George

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

若能看破又如何 2024-10-07 11:23:47

将您的文章元素设置为具有 position:relative，然后将阅读更多链接设置为具有 position:absolute，以便您可以将其定位在使用 bottom/right css 属性的文章。

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

回复收藏 0 原文

蓝眼睛不忧郁 2024-10-07 11:23:47

我已经很长时间没有使用 Javascript 了，但是在“相关”部分有一个链接可以帮助您：CSS：固定到底部并居中

回复收藏 0 原文

花开雨落又逢春i 2024-10-07 11:23:47

您可以考虑相对定位文本。

在 css 中：

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

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

You can look into positioning the text relatively.

in css:

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

this will allow you to move the link around in the box relative to the position where it's supposed to be according to document flow rules.

回复收藏 0 原文

新一帅帅 2024-10-07 11:23:47

如果您的文章“文本”大小固定，请执行以下操作：

<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;
}

...或类似的操作:)

If your article 'text' is fixed size, do something like this:

<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;
}

...or something like that :)

回复收藏 0 原文

~没有更多了~