它不会留在我想要的地方，看看这个：
<div style="float: left; width: 30%">
<img src="{avatar}" alt="" />
</div>
<div style="float:right; width: 70%; text-align: left">
{message}
</div>
<div style="clear:both"></div>
IE浏览器：
火狐浏览器：
我希望文本在顶部（尝试vertical-align：top），我希望图像在IE中的白框中。
希望更有技巧的人可以帮助我。
谢谢！无法弄清楚问题：/
* { padding: 0; margin: 0; }
body {
font: 11px Geneva, "Trebuchet MS", Arial, Verdana, sans-serif;
width: 999px;
background: #EFEFEF;
}
#content {
width: 400px;
}
.thread-content {
padding: 5px;
border: 1px solid #CECFCE;
background: #FFF;
}
div.header {
border: 1px solid #CECFCE;
background: #FFF;
margin-bottom: 10px;
}
<div id="content">
<div class="header">{title}</div>
<div class="thread-content">
<div style="float: left; width: 30%; padding: 5px">
<img src="{avatar}" alt="user avatar" />
</div>
<div style="float: right; width: 70%; text-align: left">
{message}
</div>
<div style="clear:both"></div>
</div>
</div>
确保两者的边距都设置为0：
<img src="{avatar}" alt="" style="float: left; width: 30%; margin: 0px"/>
<div style="float:right; width: 70%; text-align: left; margin: 0px">
{message}
</div>
<div style="clear:both"></div>
因为css可能非常棘手，所以尝试其他一些解决方案：
发生这种情况是因为两个浮动div的（外部）宽度之和大于外部框的内部宽度，因此它们不适合同一行。
尝试增加外部div的宽度，减小其填充，减小内部框的宽度或边距或填充。
我尝试时代码工作正常。您确定图像或文本上没有任何填充或边距？这会弄乱你正在使用的百分比。如果你有它检查Firebug中的图像和文本，看看正在应用的样式。
当你说宽度：30％或宽度：70％时，它表示div内部的内容宽度，不包括div的填充，边框和边距。看看图像，我相信你已经为这两个div添加了一些填充等。另外我在你的代码中没有看到任何'background：#fff'，所以我不确定哪一个是'白色'框。
好吧，我是否因为使用了桌子而被拒绝了？我不是交易设计师，我实际上是一名程序员，我知道有些硬核css设计师对使用表格布局的想法感到畏缩，但它似乎对我有用。我使用的图形设计师从烟花中自动生成表格布局，这是一个真正的痛苦。
无论如何，我个人试图通过纯粹的css尝试达到预期效果的方式更像。
<html>
<head>
<title>SandBox</title>
<style type="text/css">
#outerDiv
{
margin:0;
background-image:url(myImage.gif);
background-position:top left;
background-repeat:no-repeat;
padding-left:30%;
min-height:200px;
background-color:#777777;
}
#innerDiv
{
background-color:#333333;
}
</style>
</head>
<body>
<div id="container" style="width:500px;">
<div id="outerDiv">
<div id="innerDiv">content goes here</div>
</div>
</div>
</body>
注意：我不是设计师。我也把它做成了维基。所以如果你打算投票，请编辑或至少发表评论。