HTML浮動或其他 - 讓最後一個元素浮動到頂部元素旁邊

Question

我有一系列元素。最後一個元素是一個圖像。我試圖讓圖像浮動到頂部，旁邊的其他元素。目標是沒有任何額外的包裝，或使用絕對值。

#a，#b，#c和#img的高度未知。 #img寬度爲200px，#a，#b，#c寬度爲800px。區域的高度需要計算其內容。

<div id=area> 
    <div id=a>Text area 1</div> 
    <div id=b>Text area 2</div> 
    <div id=c>Text area 3</div> 
    <img id=img src=# /> 
</div> 

如果我嘗試的CSS：

#a, #b, #c { float: right; width: 800px; } 
#img { float: left; width: 200px; } 

然後像只浮旁邊#C而不是#A。

編輯：HTML無法更改。沒有包裝，沒有修改。我想知道是否有一個我不知道的技巧。我有一個用於多視圖樣式的HTML結構。我懷疑是否有解決辦法，但我想在放棄之前我會問。

Answer 1

讓你html的是這樣的：

<div id=area> 
<div id=img> 
    <img id=img src=# /> 
</div> 
<div id=a>Text area 1</div> 
<div id=b>Text area 2</div> 
<div id=c>Text area 3</div> 

#a, #b, #c {width: 800px; } #img { float: left; width: 200px; } 

Answer 2

<div id="area"> <img id="img" src="#" /> <div id="a">Text area 1</div> <div id="b">Text area 2</div> <div id="c">Text area 3</div> </div>

CSS：

#a, #b, #c {width: 800px; } 
#img { float: left; width: 200px; display:inline-block }`