OhneName: Warum wirkt display:inline hier nicht? Wo ist der Fehler?

Beitrag lesen

Hallo,

<div class='img_container'> <!-- display:inline -->
  <a href='#'>
   <img src='test.jpg' width='160' height='120'>
  </a>
  <div> <!-- display:block -->
   <a href='#comments'>0 Kommentare</a>
  </div> <!-- display:block -->
</div> <!-- display:inline -->

<div class='img_container'> <!-- display:inline -->
  <a href='#'>
   <img src='test.jpg' width='160' height='120'>
  </a>
  <div> <!-- display:block -->
   <a href='#comments'>0 Kommentare</a>
  </div> <!-- display:block -->
</div> <!-- display:inline -->

<div> <!-- display:block -->
  <a href='#' style='float:left'>
   die letzten 6 Bilder
  </a>
  <a href='#' style='float:right'>
   die nächsten 6 Bilder
  </a>
</div> <!-- display:block -->

  
Wie du siehst ist dein Problem, dass du CSS-block-Elemente innerhalb von CSS-inline-Elementen hast. Die Folge davon ist, dass der unerwünschte Zeilenumbruch erhalten bleibt. Entweder du gibst dem div im div auch display:inline oder du lässt die divs einfach floaten. Nebenbei würde ich dir noch raten die Struktur deines HTML-Codes noch einmal zu überdenken. Meiner Meinung nach hast du da ein paar divs zuviel.  
  
Gruss,  
OhneName