带有浮动元素的css边距操作

Question

In the following trivial html code: 在以下简单的html代码中：

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

why does this not separate "text 1" from "text 2"? 为什么这不将“文本1”与“文本2”分开？ Ie this ends up producing "text 1text 2". 即最终产生“text 1text 2”。 Apparently the margin is taken against the body, not the first div. 显然，保证金是针对身体的，而不是第一个div。 So, if I put do "margin-left:100px", then they show separation, because text1 is less than 100px wide. 所以，如果我把“margin-left：100px”，那么它们会显示分离，因为text1的宽度小于100px。

Thanks 谢谢

Answer 1

First try the following as you will see that 100px is not enough, because you just float the first div but the second div will append right next to the first one. 首先尝试以下操作，因为您将看到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>

You have to float the second div, too. 你也必须漂浮第二个div。

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

带有浮动元素的css边距操作

问题描述

1 个解决方案

解决方案1
2 已采纳 2011-08-27 00:14:06

带有浮动元素的css边距操作

问题描述

1 个解决方案

解决方案1 2 已采纳 2011-08-27 00:14:06

解决方案1
2 已采纳 2011-08-27 00:14:06