尝试用div替换表但部分成功

Question

尝试为网站做简单的标题，[image] [text] [splitted horizo​​ntal section]：

<div style="width: 930px;">
<div style="width: 280px; height: 80px; display: inline; background-color: red;">image</a></div>
<div style="width: 400px; height: 80px; display: inline; background-color: blue;">text</div>
<div style="width: 250px; height: 80px; display: inline; background-color: green;">
<div style="text-align: right; height: 40px; background-color: gray;">some bar</div>
<div style="text-align: right; height: 30px; background-color: yellow;">some buttons </div>
</div>
</div>

我在VS2010和IE8中看到的内容：

我在Chrome和FireFox中看到的内容：

为什么呢？以及如何解决它？我当然需要第一个变种。

Answer 1

将float：left添加到内联元素。

http://jsfiddle.net/tmKaU/1/

Answer 2

我认为这就是你要找的东西：

<div style="width: 930px;">
    <div style="display: block; float:left; width: 280px; height: 80px; background-color: red;">image</a></div>
    <div style="display: block; float:left; width: 400px; height: 80px; display: block; background-color: blue;">text</div>
    <div style="display: block; float:right; width: 250px; height: 80px; display: block; background-color: green;">
        <div style="text-align: right; height: 40px; background-color: gray;">some bar</div>
        <div style="text-align: right; height: 30px; background-color: yellow;">some buttons </div>
    </div>
</div>