Klasse verhält sich unterschiedlich bei identischen Tags

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)

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;
}
 
In der Konstruktion sorgt einfach die fehlende Klasse img_flt der Bild-Elemente "b9", "b5" und "b8" für die Fehldarstellung :)
 
Guckst Du!
Code:
<head>
<title>Lenovo</title>
<meta charset="UTF-8">
<style>

#galerie {
 width:513px;
 border:1px solid #000;
 float:left;
 padding:10px 0 0 10px;

}

#galerie img {
  float:left;
  margin:0px 10px 10px 0;
  border:none;
}
</style>
</head>

<body>
<div id="galerie">
  <img src="bild2.jpg" width="161" height="169" />
  <img src="bild3.jpg" width="161" height="169" />
  <img src="bild2.jpg" width="161" height="169" />
  <img src="bild3.jpg" width="161" height="169" />
  <img src="bild2.jpg" width="161" height="169" />
  <img src="bild3.jpg" width="161" height="169" />
  <img src="bild2.jpg" width="161" height="169" />
  <img src="bild3.jpg" width="161" height="169" />
  <img src="bild2.jpg" width="161" height="169" />
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Guckst Du!
Code:
<!doctype html>
<html>
<head>
<title>Galerie</title>
<meta charset="UTF-8">
<style>

#galerie {
width:543px;
border:1px solid #000;
float:left;

}

#galerie img {
  float:left;
  margin:10px;
}
</style>
</head>

<body>
<div id="galerie">
  <img src="pics/b1.png" width="161" height="169" />
  <img src="pics/b2.png" width="161" height="169" />
  <img src="pics/b9.png" width="161" height="169" />
  <img src="pics/b3.png" width="161" height="169" />
  <img src="pics/b4.png" width="161" height="169" />
  <img src="pics/b5.png" width="161" height="169" />
  <img src="pics/b6.png" width="161" height="169" />
  <img src="pics/b7.png" width="161" height="169" />
  <img src="pics/b8.png" width="161" height="169" />
</div>
</body>
</html>
... und rechnest du, um das zeilenweise Clearing zu erübrigen :cool:
 
Kleiner alternativer Korrekturvorschlag meinerseits :)
CSS:
#galerie {
width:543px;
border:1px solid #000;
/*float:left;*/ /* deaktiviert, um möglichen Umfluß von nachfolgendem Element zu unterbinden */
overflow:hidden /* anstatt float:left */
}
 
Es ist Absicht dass die Bilder zum Teil nicht mit der Klasse 'clearfloat' versehen sind, da das jeweils letzte Bild nicht links floaten soll.
Ich hatte das Problem gelöst indem ich das jeweils letzte Bild in der Reihe mit der Klasse clearfloat versehen habe statt der breaks.

Im Übrigen habe ich in meinem Post extra geschrieben welche Frage ich habe - und die war nicht einen Alternative zu finden ist nicht mein Problem, alles was ich wissen wollte ist wieso sich der erste breaktag anders verhält als der zweite.
Wer lesen kann ist klar im Vorteil.



ps. Weitere Hilfe ist unnötig.
 
Es ist Absicht dass die Bilder zum Teil nicht mit der Klasse 'clearfloat' versehen sind, da das jeweils letzte Bild nicht links floaten soll.
Du meinst eher img_flt, was dann aber auch nicht deiner Beschreibung entspricht ;)
ich habe eine Anordnung von 9 Bildern (3x3)
Anyway... scheinbar hast du zwischenzeitlich den Darstellungsfehler selbst bereinigt.
Ich hatte das Problem gelöst indem ich das jeweils letzte Bild in der Reihe mit der Klasse clearfloat versehen habe statt der breaks.
 
Zuletzt bearbeitet:
Zurück