L
LittleLazyLady
Hallo,
ich habe eine Anordnung von 9 Bildern (3x3) die teilweise mit float angeordnet sind. Zwischen den Bilderreihen wird einem <div> oder <br /> eine Klasse zugewiesen die den float wieder cleart.
Erstaunlicherweise wird zwischen der ersten und zweiten Reihe ein zusätzlicher Umbruch erzeugt der aber nicht im Quelltext erscheint, es ist auch sonst nicht erkennbar was diesen Abstand erzeugt.
Frage : Wodurch könnte der zusätzliche Umbruch erzeugt werden ? (Browserunabhängig)
Die css dazu sehen so aus:
ich habe eine Anordnung von 9 Bildern (3x3) die teilweise mit float angeordnet sind. Zwischen den Bilderreihen wird einem <div> oder <br /> eine Klasse zugewiesen die den float wieder cleart.
Erstaunlicherweise wird zwischen der ersten und zweiten Reihe ein zusätzlicher Umbruch erzeugt der aber nicht im Quelltext erscheint, es ist auch sonst nicht erkennbar was diesen Abstand erzeugt.
Frage : Wodurch könnte der zusätzliche Umbruch erzeugt werden ? (Browserunabhängig)
HTML:
<div id="galerie">
<img class="img_flt" src="pics/b1.png" width="161" height="169" />
<img class="img_flt" src="pics/b2.png" width="161" height="169" />
<img src="pics/b9.png" width="161" height="169" />
<div class='clearfloat'></div> // doppelter Umbruch
<img class="img_flt"src="pics/b3.png" width="161" height="169" />
<img class="img_flt"src="pics/b4.png" width="161" height="169" />
<img src="pics/b5.png" width="161" height="169" />
<div class='clearfloat'></div>
<img class="img_flt"src="pics/b6.png" width="161" height="169" />
<img class="img_flt" src="pics/b7.png" width="161" height="169" />
<img src="pics/b8.png" width="161" height="169" />
</div>
Die css dazu sehen so aus:
CSS:
#galerie img{
border:thin solid #FFF;
margin:0px 20px 15px 5px;
}
#galerie .img_flt {
border:thin solid #FFF;
float:left;
}
.clearfloat {
clear:both;
height:0;
line-height: 0px;
}