文字環繞圖像，圖像來源於最後。液體佈局

Question

我有一個圖像，我想圍繞它的文字。例如

ttttttt|image|  
ttttttt|  | 
tttttttttttttt 
tttttttttttttt 

如果圖像位於源代碼中的文本之前，這將很容易。但是，我需要的圖像來像這樣的文本之後：

文字文字文字文字文字 文字文字文字文字 文字文字文字文字 文字文字文字 IMAGE

我不知道圖像尺寸或文本將有多寬是（作爲佈局是液體）

我不想用JS

非常感謝

Answer 1

只是另一種方式來做到這一點筆記...

只要你是幸福的圖像是在第一源（這樣就可以浮動），您可以使用顯示：表 - 字幕翻轉其中圖像不浮動在小屏幕上的源，以便

大屏幕

img{ 
float:left; 
} 

小屏幕

.container{ 
display:table; 
caption-side: bottom; 
} 

img{ 
float:none; 
display: table-caption; 
} 

希望能幫助有人試圖做類似的事情。如果這不明顯，給我發一張便條，然後我會粘貼一些代碼。

Answer 2

你可以用兩種方法做到這一點。

在圖片代碼：

<img src="http://www.wesleyeterry.com/apple-touch-icon-precomposed.png" align="left" vspace="4" hspace="4"> 

或者在CSS：

<style> 
img { 
float:left; 
margin:2px; 
} 

http://www.wesleyeterry.com/apple-touch-icon-precomposed.png

Answer 3

我想我有一個解決方案，以我自己的問題。

這對我很有用，因爲我希望圖片在源文本之後出現的原因是在小屏幕上我沒有浮動它，並且我希望內容位於圖片上方。如果圖像是第一個，那麼它會在一個小屏幕上顯得過高。

我的解決方案不是很有意義 - 但除此之外，我沒有看到問題 - 可能是另一個http請求，所以請讓我知道，如果任何人都可以看到這個問題。

以下是我的工作方式：

添加圖像兩次。首先在文本之前。確保「alt」是空的。

然後在內容後再次添加圖像。確保替代文字是適當的。

包裹在一個div圖像和文本，並將其設置爲「顯示：相對」

設置第一個圖像浮動權，其知名度隱藏 設置第二圖像的位置是：絕對的，它的位置在容器上顯示相對容易

浮動圖像作爲絕對定位的浮動圖像，我們不必使用JS來制定出任何尺寸，所以如果使用最大寬度圖像會縮小，文字仍然會按照它的樣子（沒有任何回調JS來獲得新尺寸）

然後對小屏幕使用媒體查詢，我已將第一個圖像設置爲「display：none」，並未將絕對位置應用於第二個圖像。所以就用戶而言，他們看到的內容是圖像。

似乎在我最初的測試中運行良好，但感覺像一個黑客攻擊。也許我可以用彈性盒做一些事情，但我會再留下一段時間。如果有人知道更好的解決方案，或者可以想出爲什麼這是非常糟糕的原因，請讓我知道！