初歩的かもしれませんが回り込みが上手くできません

質問

初歩的かもしれませんが回り込みが上手くできません
イメージ的には、図のようなdivを４つ横に並べて改行、同じように繰り返したいです。

■■■■
■■■■

しかし、下記の様にすれば

■■■
■
■■■
■

に、なってしまいます。
こういう場合、どうすればいいのでしょうか？？

<div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave1</a></div>
<div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave2</a></div>
<div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave3</a></div>
<div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave4</a></div>
<div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave5</a></div>
<div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave6</a></div>
<div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave7</a></div>
<div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave8</a></div>

回答No.2

SortaNerd · ベストアンサー

floatの挙動を理解しておられないようです。
結論から言うと、「float:left」を全てに入れ、5つめに「clear:left」を入れてください。もっと続くなら、同様に4つごとに入れてください。

なぜそうなるかですが、
まず何も指定しないdivはブロックレベル要素であり、ブロックレベル要素は通常では横に並びません。
これを通常の流れから切り離して横にも並ぶようにする指定がfloatです。
ですので横に並べる全ての要素にfloatを入れなければなりません。

そして、そのままでは横幅いっぱいまで並ぶところ、それを解除する指示がclearです。
具体的には、それ以前の全てのfloatした要素より下に表示されるようになります。

floatとclearについてはこちらのページがとても参考になります。
http://webdesignrecipes.com/css-visual-formating-model/

4つごとにclearを入れる方法ですが、個別に入れるのは望ましくないので、cssを分離した上で、親要素に「nth-child(4n)」で指定するのが常套です。

なお、No1さんの書き方のように、divの代わりにliを使っても構いません。最近の流行りですね。
また(説明がありませんが)親要素の幅を子要素の4倍にすることで4つ置きに改行させているようですが、子要素の内容やマージンの指定で大きさが変わった時に破綻しますので、個人的にはあまり好きではないです。
(きちんと調整できれば)古いブラウザでも確実に動くのは利点なのですが…。

お礼

ご回答ありがとうごさいます。
floatとclearは同時に入れて良かったんですね。
どちらかしか入れられないと思ってました。。。
それで挙動を勘違いしてて；；

nth-childの活用例もいまいち分かってませんでした。
根本的にデザインを見直してみたいと思います。
ありがとうごいました。

回答No.1

ORUKA1951

いえ、デザインのために--「divを４つ横に並べて改行、同じように繰り返したい」のためにdivを使うのではありません。
　あくまでdivは、
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ものです。

　そんなHTMLを書いていたらデザインを変えようとしたら、すぐ行き詰る。

例えば、リンク(ナビゲーションでしたら)
<div class="nav"><!-- class名でナビゲーションだと文書構造を示す -->
　<ul>
　　<li><a href="http://okwave.jp" target="_blank">okwave1</a></li>
　　<li><a href="http://okwave.jp" target="_blank">okwave1</a></li>
　　<li><a href="http://okwave.jp" target="_blank">okwave1</a></li>
・・・
　だけで良いのですよ。気が変わったらいつでもデザイン変えられる。

そのうえでスタイルシートで、
div.nav ul,div.nav ol li{list-style:none;margin:0;padding:0;}
div.nav ul{font-size:0;width:480px;text-align:center;}
div.nav ul li{font-size:16px;width:120px;display:inline-block;position:relative;height:120px;}
div.nav ul li a[href="http://okwave.jp"]:before{content:url(okwave.png);}

だけでよい。
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
のサイトで、ブラウザ(Chromeを除く)の[表示メニュー]から、スタイルシートを変えてみましょう。
　HTMLは極めてシンプルで文書構造しか書いてないから、色々にデザインできる。もちろん印刷時には違うデザインになるし、ウィンドウ幅を変えても良い。

＞初歩的かもしれませんが回り込みが上手くできません
　まず、率直にHTMLで（デザインなんか考えずに）文書構造だけをマークアップして、それからスタイルシートでデザインしていく・・・これが最も大事な初歩【基本】です。
『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』とはそういう事です。

お礼

ご回答ありがとうございます。
DIV要素の使い方が根本的に間違ってたんですね。。。
勉強になりました。
ちょっと一からデザインを考え直してみます。