如何使用HTML / CSS在圖像下對齊文本？

Question

我正在嘗試將圖像下的兩個鏈接調整為文本，我得到的HTML在Chrome和Firefox中完美運行，但是在IE中卻無法使用，我們90％的內部用戶都是HTML。

這是代碼。

    <div style="float: right;"><img src="sites/default/files/recog.png" width="419" height="465" style="border: 6px double #7a9a01;" /><br />
    <p style="text-align: right;"><a href="webform/world-of-thanks">Click to Nominate Online!</a></p>
    <p style="text-align: right;"><a href="hr/files/world-thanks-nomination-form/attachment/newest">Print your nomination form here.</a></p>
    </div>
    <h2>"A World of Thanks!" program</h2>
    <p>The “World of Thanks!” program is a collection of...</p>

在Chrome中，上面的HTML在左側顯示文本和內容，在右側顯示圖片，並在右側顯示鏈接文本。

在IE中，鏈接首先顯示在左側，然后是文本，圖像在右側顯示。.但是在IE中，鏈接不是在圖像下方，而是在圖像左側。

任何想法？ 我究竟做錯了什么？

在IE中出錯。.https ://oppy.com/it/ie_broken.png
在Chrome中正確。.https ://oppy.com/it/correct_chrome_only.png

Answer 1

a標簽是自然inline-block努力你設置a以display: block; 與圖像標簽相同。 在您的CSS中定位圖片並添加display: block; 對此

我沒有IE，但可以嘗試以下方法：

JSFIDDLE

Answer 2

我沒有要測試的IE，但請嘗試為div設置一個固定的寬度。

<div style="float: right; width: 431px;">