html - 并排使用 float <div>

Question

我似乎无法理解 float 属性

<div style="background-color:green;width:40px;height:50px;float:left;"> test </div>
<div style="background-color:blue;width:50px;height:40px"> hello  </div>

我将第一个 div 向左浮动，第二个 div 应该在它旁边，但它只是在它上面，顺便说一句，如果我添加到第二个 div 它会起作用:溢出:滚动

Answer 1

通过将 float: left; 添加到第二个 div，我们可以解决这个问题。您还可以在第二个 div 上使用 float: right;。

http://jsfiddle.net/x3Lgu/

您需要 float 两个 div。仅 float 一个 div 会创建空间，其他元素可以包裹在 float 的元素周围。在您的情况下看起来很奇怪，因为您将宽度限制得非常窄。如果宽度更大，您会更清楚地理解我的意思。您通常会在文本环绕图像的页面中看到这种情况。例如....

http://jsfiddle.net/ErjcN/

注意文本是如何环绕图像的。这正是您的文档所发生的情况。