float des parent auflösen

[Melanie]

Hallo,

ich arbeite mit dem LMS Moodle und habe mir da eine Sektion mit handgemachten "Badges" eingerichtet.

Der Code der Sektion sieht in etwas so aus (Überflüssige Div-Schachtelungen hab ich jetzt mal rausgenommen):

  
<ul class=section img-text">  
  <li id="module-2141141" class="activity label modtype_label">  
    <div><p><img ...></p></div>  
  </li>  
 <li id="module-2141142" class="activity label modtype_label">  
    <div><p><img ...></p></div>  
  </li>  
  
</ul>  

Erst in die <p>-Elemente oder darunter kann ich Code einschleusen. Hier habe ich auch die Badges als Bilder eingefügt. Damit diese nicht untereinander, sondern nebeneinander erscheinen, habe ich über eine eingebundene css-Datei für die li-Elemente float:left und width:150px eingefügt. Funktioniert hervorragend, alle li-Elemente erscheinen nebeneinander.

Leider möchte ich gerne gruppieren, so dass nach manchmal 4, manchmal 6 Bildern ein Zeilenumbruch erfolgt. Ich müsste also eigentlich ein clear:left o.ä. zwischendrin einfügen. Leider kann ich ja an das li-Element nicht heran (und es ist ja auch nicht immer das gleiche), sondern nur an eines der Kinder-Elemente. Hier hilft mir das clear ja nicht.
Hat jemand eine Idee, wie man das eventuell verwirklichen könnte?

Es wäre toll, wenn mir hier jemand weiterhelfen könnte.
Vielen Dank,
Melanie