编辑：添加完整代码

Question

它不会停留在我想要的地方，看看这个：

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

Internet Explorer：

Mozilla Firefox：

我希望文本位于顶部（尝试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>

Answer 1

确保两者的边距都设为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可能非常棘手，所以尝试其他一些解决方案：

让两个浮动，应该没有区别。
确保边框不会增加尺寸。
减少一点的宽度，IE很顽固。

Answer 2

这是因为两个浮动div的（外部）宽度之和大于外部框的内部宽度，因此它们不适合同一行。

尝试增加外部div的宽度，减小其填充，减小内部框的宽度或边距或填充。

Answer 3

我尝试时代码工作正常。您确定图像或文本上没有任何填充或边距？这会弄乱你正在使用的百分比。如果你有它，请检查Firebug中的图像和文本，看看正在应用的样式。

Answer 4

当你说宽度：30％或宽度：70％时，它表示div内部的内容宽度，不包括div的填充，边框和边距。看看图像，我相信你已经为这两个div添加了一些填充等。另外我在你的代码中没有看到任何'background：#fff'，所以我不确定哪一个是'白色'框。

Answer 5

好的，我因为使用了桌子而被拒绝了吗？我不是交易设计师，我实际上是一名程序员，我知道有些硬核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>

注意：我不是设计师。我也把它做成了维基。因此，如果您要投票，请编辑或至少发表评论。

CSS浮动搞砸了

编辑：添加完整代码

5 个答案: