Unsortierte Liste mit Zeilenumbruch in div's

südpol

Erfahrenes Mitglied
Hi,

ich habe eine unsortierte Liste:

Code:
<ul>
  <li class="mylist">
    <div class="item_1">Content</div>
    <div class="item_2">Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content </div>
    <div class="item_3">Content</div>
  </li>
 <li class="mylist">
    <div class="item_1">Content</div>
    <div class="item_2">Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content </div>
    <div class="item_3">Content</div>
  </li>
</ul>

Mit diesem CSS code

Code:
.mylist {
  display: inline;
  list-style: none;
}

.item_1 {
  width: 33%;
  float: left;
}
.item_2 {
  width: 33%;
  float: left;
}
.item_3 {
  width: 34%;
  float: left;
}

Mein Ziel ist es, dass die Daten innerhalb der DIV container item_* immer schön untereinander stehen. Das funktioniert auch bis zu dem Zeitpunkt an dem der Inhalt eines der DIV's zu einem Zeilenumbruch führt (was gewollt ist und auch vorkommen soll). Ab dem Punkt passt in der Liste nichts mehr, da das nächste DIV Item rechts von dem (jetzt zu langen) div angezeigt wird...

Kann mir jemand sagen, wie ich das li Item dazu bekomme mit den darin befindlichen divs in die Höhe zu wachsen?
 

südpol

Erfahrenes Mitglied
Habe die Lösung selbst gefunden. Ich habe umgestellt von li auf div mit "display: talble" etc. das ist fast noch besser :)