带有浮动元素的 CSS 边距操作答案

【问题标题】：css margin operation with floated element带有浮动元素的 CSS 边距操作
【发布时间】：2011-11-04 21:55:31
【问题描述】：

在以下简单的 html 代码中：

<body>
   <div style="float:left">text 1</div>
   <div style="margin-left:10px">text 2</div>
</body>

为什么不将“文本 1”与“文本 2”分开？ IE。这最终产生“文本1文本2”。显然，边距是针对身体的，而不是第一个 div。所以，如果我输入 do "margin-left:100px"，那么它们就会显示分离，因为 text1 的宽度小于 100px。

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

首先尝试以下操作，您会发现 100px 是不够的，因为您只是浮动第一个 div，但第二个 div 将附加在第一个 div 旁边。

<div style="float:left">text 1 text 1 text 1 text 1 text 1 text 1 text 1</div>
<div style="margin-left:100px">text 2</div>

你也必须浮动第二个 div。

<div style="float:left">text 1</div>
<div style="float:left;margin-left:10px">text 2</div>

【讨论】：

是的，这行得通，谢谢。所以如果两个都不放float的话，第二个div是正常流，它的margin是相对于body的？
是的，如果你想将它们并排对齐，你必须浮动两个 div。
我想这就是令人困惑的地方：只是将 float 放在第一个 div 上，并排对齐。虽然它这样做了，但很明显，除非让它们都浮动，否则边距不会按预期工作。 :-( 感谢您的帮助。