-1

我有这段简单的代码：

HTML：

<body>  
    <div id="red">  ABC </div>
    <div id="blue"> ABC </div>  
</body>

CSS：

body{
    width: 300px;
}
#red{   
    float:left;
    width: 100px;
    height: 100px;  
    background-color: red;  
}

#blue{  
    height: 100px;
    background-color: blue;
}

我看到红色正方形和旁边的蓝色。

但是，如果我添加行“宽度：100px;” 在#blue 中，一切都毁了：“ABC”向下跳了一行，没有蓝色背景。为什么？

4

2 回答 2

5

因为另一个 div 漂浮在它上面。当您浮动某些东西时，任何未浮动的元素都将在浮动元素后面有其外部边界。因此，蓝色框实际上在红色框的后面。但是因为红色是块级元素，所以文本不适合在那里，所以它位于红色下方。两者都浮动，它会起作用

http://jsfiddle.net/AUZxY/

于 2012-08-09T15:35:57.587 回答
4

尝试将两个元素都向左浮动，我相信我放在一起的这个 Fiddle应该是你要找的。

于 2012-08-09T15:35:52.250 回答