Wie bekomme ich eine neue Zeile, nachdem ich float: left verwendet habe?

Ich versuche, Bildreihen zu haben, 6 Bilder in jeder Reihe. Auf einigen dieser Bilder muss ein anderes Bild schweben (bündig mit der unteren rechten Ecke). Ich konnte das aus diesem Thread zum Laufen bringen:

Wie positioniere ich ein Bild in HTML über einem anderen?

Jetzt kann ich die neue Zeile nach dem 6. Bild jedoch nicht mehr abrufen. Weder <BR>noch <P>eine neue Zeile erstellen. Sie schieben das nächste Bild einfach um mehrere Pixel nach unten, aber das Bild befindet sich immer noch in derselben Zeile. Es scheint, als würde der Float-Stil das <BR>und / oder stören <P>.

Ich habe versucht, verschiedene Stile für das Bild zu verwenden, das eine neue Zeile startet, wie float:noneund display:block, aber keiner hat funktioniert. Das Seltsame ist, dass die neue Zeile nach dem 7. Bild beginnt .

Folgendes verwende ich bisher:

<style type="text/css"> 
.containerdiv { float: left; position: relative; } 
.containerdivNewLine { float: none; display: block; position: relative; } 
.cornerimage { position: absolute; bottom: 0; right: 0; } 
</style>

<div class="containerdiv">
  <img border="0" height="188" src="myImg" width="133" />
  <img class="cornerimage" height="140" src="imageOnTop" width="105" />
</div>

Wenn ich für das 7. Bild versuche, eine neue Zeile zu beginnen, ersetze ich einfach die Klasse 'Containerdiv' durch 'ContainerdivNewLine'.

Sie müssen den Float nach jeweils 6 Bildern "löschen". Ändern Sie mit Ihrem aktuellen Code die Stile für containerdivNewLine:

.containerdivNewLine { clear: both; float: left; display: block; position: relative; } 

Sie können auch verwenden

<br style="clear:both" />

Probieren Sie die Eigenschaft clear aus .

Denken Sie daran, dass float ein Element aus dem Dokumentlayout entfernt - also ja, in gewisser Weise "störend" brund pmarkiert, in dem Sinne, dass im Grunde alles im Hauptflusslayout ignoriert wird.

Auch so

<br clear="all" />

Ein anderer Ansatz, der etwas semantischer ist, besteht darin, eine UL als Ihre gesamte Bildbreite von 6 zu definieren, wobei jede LI als links schwebend und die Breite als definiert definiert ist. Wenn also LI # 7 trifft, läuft sie in die Grenze der UL und wird verschoben bis zur neuen Reihe. Sie haben immer noch einen offenen Float, den Sie nach dem / UL löschen möchten - dies kann jedoch im nächsten Element der Seite oder als Clear Div erfolgen. Hier ist eine Art Idee, Sie müssen sich möglicherweise mit tatsächlichen Werten anlegen, aber dies sollte Ihnen die Idee geben. Der Code ist etwas sauberer.

 <style type="text/css"> 
ul#imageSet { width: 600px; margin: 0; padding:0; }
ul#imageSet li { float: left; width: 100px;  height: 188px; margin: 0; padding:0; position: relative; list-style-type: none; }
.cornerimage { position: absolute; bottom: 0; right: 0; } 
h3.nextelement { clear: both; }
</style>


<ul id="imageSet">
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
     <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
    <li>
        <img border="0" height="188" src="http://farm3.static.flickr.com/2459/3534790964_5d8bed17c0.jpg" width="100" />
        <img class="cornerimage" height="140" src="http://farm4.static.flickr.com/3310/3514664446_08e9745681.jpg" width="50" />
    </li>
</ul>


<h3 class="nextelement">Next Element in Doc</h3>