使用CSS在多個框的底部創建固定文本

我正在使用CSS來對齊我的文本（這只是一個「更多」鏈接）在我的預覽文章框有標準高度的底部。在「更多」鏈接後顯示僅低於宣傳片文字的，我需要將它定位只是文章框獨立的文字高度的底線以上幾個像素，這樣使用CSS在多個框的底部創建固定文本

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

你能請給我一些想法或例子？

問候，喬治

來源

2010-11-02 Maverick

是你的文章盒子固定大小？我假設你使用'div'？ – dooburt 2010-11-02 16:46:54

不確定你的意思，但如果我理解正確，你希望底部的文本位於底部行上方的預覽框內而不是下面的文本內？這有一個技巧，但它需要你創建一個沒有邊界的內部div，它具有明確定義的高度（例如當前高度 - 例如24px）。外部div可以有邊框，所以看起來文本在裏面。 – Neil 2010-11-02 16:51:04

設置你的文章元素有position:relative，然後設置更多鏈接有position:absolute，這樣就可以使用bottom/right CSS屬性文章內的定位吧..

例如在http://www.jsfiddle.net/gaby/7bduy/

來源

2010-11-02 17:18:15

是的，這就是我想要的。謝謝加比！ – Maverick 2010-11-04 09:18:39

我還沒有使用的JavaScript在很長一段時間，但右側的「相關」部分有一個鏈接，可以幫助你：CSS: fixed to bottom and centered

來源

2010-11-02 16:49:23 Snailer

您可以查看相對定位文本。

在CSS：

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

這將允許您相對於盒四處移動鏈接到它要根據文件流規則應該的位置。

來源

2010-11-02 17:21:37 Kobby

如果你的文章 '文本' 是固定的大小，做這樣的事情：

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

...或者類似的東西:)

來源

2010-11-02 17:29:43 dooburt

包含文本的框的大小是固定的，但文本最多可能有2或3或5行。上面的例子顯示在http://www.jsfiddle.net/gaby/7bduy/的例子是我真正想要的。謝謝！ – Maverick 2010-11-04 09:20:28

使用CSS在多個框的底部創建固定文本

回答

相關問題