將文字對齊到一個大<a>元素的底部

如何將文本對齊到div中大<a>元素的右下角？將文字對齊到一個大<a>元素的底部

這是我的，但我想在框的底部的文字。我搜索了很多，一切都沒有爲我工作：

<div class="thumbnail"> 
    <a href="http://link.com">Link to somewhere</a> 
</div>

與下面的CSS：

.thumbnail{ 
    width: 200px; 
    height: 200px;} 

.thumbnail a{ 
    display: block; 
    height: 100%; 
    width: 100%; 
    text-align: right; 
    background-color: lightgrey;}

http://jsfiddle.net/8JsPV/

謝謝

來源

2012-12-17 Nicolas

我改變了你的HTML並把整個東西放在一個<a>標籤中，所以它都是可點擊的。 jsFiddle Here。

HTML：

<a href="#"><div class="thumbnail"><span>Link to somewhere</span></div></a>

CSS：

.thumbnail{ 
    width: 200px; 
    height: 200px; 
    position: relative; 
    background-color: lightgrey; 
} 

.thumbnail span{ 
    display: block; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
}

編輯：

做纔不至於把一個DIV的<a>內，儘量this。

來源

2012-12-17 02:45:16 hellohellosharp

謝謝，但與此問題是這樣的：http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct – Nicolas

陷阱。試試我的編輯:) – hellohellosharp

這確實有用！但它仍不是一個非常優雅的解決方案。我會認爲必須有一種方法將其真正地對齊到底部... – Nicolas

如果你改變了這應有助於HTML相應：

.thumbnail{ 
    position: absolute; 
    bottom: 0; 
    right: 0; 
} 

a{ 
    display: block; 
    position: relative; 
    width: 200px; 
    height: 200px; 
    background-color: lightgrey; 
}

HTML：

<a href="http://link.com"><div class="thumbnail">Link to somewhere</div></a>

Updated fiddle

來源

2012-12-17 02:40:23

問題在於''不再適用於該領域（我認爲OP希望整個事情都是可點擊的）。 – hellohellosharp

與此問題是這樣的：http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct – Nicolas

試試這個

.thumbnail 
    { 
     position: relative; 
     width: 200px; 
     height: 200px; 
     background-color: Orange; 
     display: block; 

    } 

    .thumbnail span 
    { 
     position: absolute; 
     right: 0px; 
     bottom: 0px; 
     display: block; 
     text-align: right; 
     background-color: Gray; 
    }

並更改HTML像這樣

<a class="thumbnail" href="#"><img 
    src="http://www.healthfiend.com/wp-content/uploads/2011/01/Facial-Exercises.jpg" 
    alt="face" /><span>Link to somewhere</span></a>

這使得整個事情可以點擊並對齊文本右下角。我用一個img標籤替換了你的div，因爲我假設它是一個縮略圖，這實際上是你最終可能想要的。對？

來源

2012-12-17 02:42:59

謝謝，但我需要整個div是「可點擊」 – Nicolas

將文字對齊到一個大<a>元素的底部

回答

相關問題