-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;
}

そのすぐ隣に赤いスクアラと青いスクアラが見えます。

ただし、「width：100px;」という行を追加すると、#blueでは、すべてが台無しになっています。「ABC」が1行下にジャンプし、青い背景がありません。なぜですか？

4

2 に答える 2

5

他の div がその上に浮かんでいるためです。何かをフロートすると、フロートされていない要素は、フロートされた要素の後ろに外側の境界があります。そのため、青いボックスは実際には赤いボックスの後ろにあります..しかし、赤はブロックレベルの要素であるため、テキストはそこに収まらず、赤の下に配置されます. 両方をフロートすると機能します

http://jsfiddle.net/AUZxY/

于 2012-08-09T15:35:57.587 に答える
4

両方の要素を左に浮かせてみてください。私がまとめたこの Fiddleは、あなたが探しているものであるはずです。

于 2012-08-09T15:35:52.250 に答える