在浮動的圖像（鏈接）下左對齊文本？

我有這個圖片鏈接：在浮動的圖像（鏈接）下左對齊文本？

<p class="alignright"> 
    <a target="_blank" href="..."> 
     <img width="230" height="158" align="right" style="margin-right: 30px; margin-top: 20px;" src="some_source" > 
    </a> 
    text should go here 
</p>

的alignright類看起來像這樣：

.alignright { 
    float: right; 
    margin: 4px 0 1px 10px; 
}

現在，我試了幾個東西放在上面的圖片鏈接下方的文本（我試圖用一個< BR>和圖片標題），但一切都失敗了。該文本或者左邊太遠，或者甚至不在圖像鏈接之下。

任何想法如何讓圖片鏈接下方的文字？

謝謝！

來源

2012-09-05 user1638055

哪個文字是你的國王關於？ – freebird

一些文字，無所謂......每次都會有所不同，我只需要知道一般的方法。 – user1638055

所以你希望你的文字應該出現在圖片鏈接下面，是嗎？ – freebird

你是說你想要的文字對齊到左邊緣的圖像鏈接的？

這意味着你必須把兩種元素融入其中容器和浮動分配：left屬性這一個：

我想，這是「」我可以在你的樣品中看到的。您是否確定p元素的寬度與圖像鏈接的寬度相同？

否則文本將與頁面上的p邊框對齊。

收縮P-元件的大小或者把一切都變成一個額外的容器：

<div style="float:right; width:#IMAGE_LINK_WIDTH#; text-align:left;"> 
    <a href="">IMAGE_LINK</a> 
    <!-- A <br /> might be placed here --> 
    Text 
</div>

來源

2012-09-05 12:49:45 Nippey

這樣做，謝謝！ – user1638055

這裏是其他感興趣的小提琴：[JSFiddle]（http://jsfiddle.net/vYRLZ/2/）。感謝@freebird準備它！ – Nippey

後<p class="alignright"></p>標籤把

<br style="clear: both;" /> 
some text here

文本將出現在圖像之下。

來源

2012-09-05 12:36:40 Wilq

謝謝，這看起來很有希望，只有一件事。如果我在下面的文字是鏈接，它的所有內容都在一行上，當圖像寬度達到時我怎麼能斷開鏈接？你知道我的意思？ – user1638055

Live Sample

只需添加一個span或div與clear:both屬性，然後對齊文本，因爲你需要。

編輯：

如果圖像下方的文本是一個link然後就敷鏈接p標籤內這樣

<p><a href="#">Your Text</a></p>

通過這樣做，你的link會出現在下一行因爲p是block元素。

Block元素在放置位置之前和之後強制換行符。

來源

2012-09-05 12:38:46 freebird

謝謝，看起來很有希望，只有一件事。如果我在下面的文字是鏈接，它的所有內容都在一行上，當圖像寬度達到時我怎麼能斷開鏈接？你知道我的意思？ – user1638055

這是HTML文件

<a href="#" target="_blank"><img src=""><span id="title" >your text</span></a>

這是css文件

span#title { 
text-align: center; 
font-weight: bold; 
} 

span { 
background: black; 
bottom: 459px; 
padding: 5px; 
color: white; 
opacity: 0.7; 
position: absolute; 
left: 8px; 
width: 244px; 
}

嘗試以這種方式

來源

2012-09-05 12:55:15 paripurna

讓我知道它是否有幫助 – paripurna

在浮動的圖像（鏈接）下左對齊文本？

回答

相關問題