<html>
<body>
<div id="content1">
<div id="text1">This text floats left</div>
<div id="images1"><img src="img.jpg" /></div> <!--Floats right-->
</div>
<div id="content2">Text 2</div>
</body>
</html>
これを行おうとして、テキストが左に浮かび、画像が最上列に右に浮かぶ2行のテーブルのようなレイアウトを作成しようとすると、コンテンツ2 divがコンテンツ1に押しつぶされるだけです。 div。どうすればそれらを別々に保つことができますか?
#content2 divでclear:both;
を使用する必要があります
フロートに関するすべてを本当に学びたいなら、この素晴らしいチュートリアルをチェックしてください: http://css.maxdesign.com.au/floatutorial/
使用する clear:both;
on your content#2
適用:
#images1{
float:right;
}
#content2{
clear:both;
}
あなたのhtmlマークアップを修正してください
<div id="images1"><img src="img.jpg" /> <!--Floats right-->
divを閉じます:
<div id="images1"><img src="img.jpg" /> <!--Floats right--></div>
overflow:hidden
content1 divで展開すると、すべてのフローティングされた子が含まれます。 (もちろん、フロートされていないオーバーフローコンテンツは非表示になります。)
<div id="images1">
を閉じるのを忘れました:)
content2 divで 'clear:both'を使用します
フロートをクリアします。ここに何が起こっているかを説明する記事があります: Clearing A Float Element
閉鎖していません<div id="images1">
。このdivが閉じていて、Content divがフロートのままではない場合、機能するはずです。