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

73

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'.

html css user26270
quelle
1
Wenn möglich, können Sie versuchen, die Klasse "containerdiv NewLine"anstelle von zu verwenden "containerdivNewLine". Auf diese Weise können Sie einfach den zusammengesetzten Stil verwenden, div.containerdiv.NewLine { clear: left }anstatt den position: relative;und andere gängige Stile von zu wiederholen div.containerdiv.
James A. Rosen

Antworten:

95

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; }
Chad Birch
quelle
Das hat funktioniert, danke! Ich habe jedoch auch "normalen" Inhalt (Text und ein paar kleine Bilder, die ohne Styling nebeneinander fließen), die ich zwischen Bildreihen einfügen möchte, und dies funktioniert nicht mit diesem "normalen" Inhalt. Das habe ich in der ursprünglichen Frage jedoch nicht erwähnt. Irgendwelche Ideen dazu? Ich habe versucht, in diesen Bereichen einfache <div style = "display: none"> zu verwenden, aber das hat auch nicht funktioniert.
user26270
2
Der normale Text muss auch darauf stehen clear: both, wenn ich Sie richtig verstehe.
Chad Birch
Ja, das hat es geschafft, nochmals vielen Dank. Ich brauche einen kleinen Abstand zwischen den Abschnitten, aber ich werde versuchen, diesen herauszufinden.
user26270
Gute Lösung !
Sunil Kumar
51

Sie können auch verwenden 

<br style="clear:both" />
Mironline
quelle
4

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.

womp
quelle
1

Auch so

<br clear="all" />
Vlad
quelle
0

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>
nick92675
quelle