web-dev-qa-db-ja.com

HTML divを別のdivの下に配置するにはどうすればよいですか？

<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。どうすればそれらを別々に保つことができますか？

csshtmlrows
18
DarkLightA

＃content2 divでclear:both;を使用する必要があります

フロートに関するすべてを本当に学びたいなら、この素晴らしいチュートリアルをチェックしてください： http://css.maxdesign.com.au/floatutorial/

21
Dave Kiss

使用する clear:both; on your content＃2

2
sgokhales

適用：

#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>
2
Niklas

overflow:hidden content1 divで展開すると、すべてのフローティングされた子が含まれます。 （もちろん、フロートされていないオーバーフローコンテンツは非表示になります。）

0
Tgr

<div id="images1">を閉じるのを忘れました:)

0
solendil

content2 divで 'clear：both'を使用します

0
Rizwan Sharif

フロートをクリアします。ここに何が起こっているかを説明する記事があります： Clearing A Float Element

0
BentOnCoding

閉鎖していません<div id="images1">。このdivが閉じていて、Content divがフロートのままではない場合、機能するはずです。

0
Vinnyq12