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 }`