【问题标题】：CSS floats messed upCSS浮动搞砸了
【发布时间】：2019-03-29 02:03:16
【问题描述】：

它不会停留在我想要的位置，看看这个：

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

我希望文本位于顶部（尝试垂直对齐：顶部），并且我希望图像位于 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>

【问题讨论】：

能否也包含父容器元素的html/css？

标签： css html css-float

【解决方案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 可能非常棘手，可以尝试一些其他解决方案：

让两者都向左浮动，应该没有区别。
确保边框不会增加尺寸。
将 1 的宽度减小一点，IE 很顽固。

【讨论】：

略有编辑。始终消除不必要的开销。

【解决方案2】：

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

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

【讨论】：

70% + 30% = 100%... 表示完全匹配。让我思考。
不在 CSS 世界中。这就是 CSS 盒子模型的“美”。
是的，没错...填充和边框可以轻松破坏布局。
在 CSS 中，width 属性测量元素的内部宽度（不包括内边距、边框和边距）。您正在尝试排列外部宽度（包括填充、边框和边距）。你最终得到的是 70% + 30% + div1-padding + div1-border + div1-margin + etc. 的总外部宽度。 t 总计 0（边距可以为负数），它们会太宽。
如果您有边距、填充或边框，则不会。有关盒子模型的说明，请参阅css-tricks.com/the-css-box-model。

【解决方案3】：

当我尝试时，代码运行良好。您确定图像或文本上没有任何填充或边距吗？那会弄乱您正在使用的百分比。如果您有它，请检查 Firebug 中的图像和文本以查看正在应用的样式。

【讨论】：

【解决方案4】：

当您说 width: 30% 或 width: 70% 时，它表示 div 内的内容的宽度，不包括 div 的 padding、border 和 margin。查看图像，我确定您已经为两个 div 添加了一些填充等。此外，我在您的代码中没有看到任何“背景：#fff”，所以我不确定哪个是“白色”框。

【讨论】：

【解决方案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>

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

【讨论】：