横並び画像がレイアウト崩れを起こしている!らしい的な時に。

いつもの場所、いつもの景色、そう税務署の確定申告。
ものすごい人々の行列、〇〇ランドか!って突っ込みを、
入れるつもりも、入れられるつもりもありません、、、
無事に申告が終わりました。そろそろ桜の花も満開になりますね。
私のお仕事も満開に咲いてほしいところですが、、、

さてクライアント様からのご指摘と私の覚え書きです。
「横方向に繰り返し表示される画像群で、縦横様々なサイズ違いの画像やテキストの量で、横並びのレイアウトが崩れる」
う~ん予想外だったな。同じくらいの画像とちょいコメ程度なら問題ないのに。
で、その現象を抑える方法。
cssにnth-child( ) {clear:both;}の適用。
おそらく普通のことなんでしょうかね。これ。

画像、4個で折り返しの場合。
html側


<ul class="photoBox">
<li><a href="#"><img src="images/img.jpg"></a></li>
<li><a href="#"><img src="images/img.jpg"></a></li>
<li><a href="#"><img src="images/img.jpg"></a></li>
<li><a href="#"><img src="images/img.jpg"></a></li>
<li><a href="#"><img src="images/img.jpg"></a></li>
</ul>

css側


.photoBox li{float:left;}
.photoBox li:nth-child(4n+1) {clear: both;}