как получить новую строку после использования float: left?

Question

То, что я пытаюсь сделать, это иметь ряды изображений, по 6 изображений в каждой строке. Некоторые из этих изображений должны иметь другое изображение, плавающее над ними (вровень с правым нижним углом). Я смог заставить это работать из этой темы:

Как разместить одно изображение поверх другого в HTML?

Однако теперь я не могу получить новую строку после 6-го изображения. Ни <BR>, ни <P> не создают новую строку. Они просто толкают следующее изображение на несколько пикселей вниз, но изображение остается в той же строке. Кажется, что стиль float мешает <BR> и / или <P>.

Я пытался использовать разные стили для изображения, которое начинает новую строку, например float:none и display:block, но ни один из них не работал. Странно то, что новая строка начинается после 7-го изображения.

Вот что я сейчас использую:

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

Для 7-го изображения, когда я пытаюсь начать новую строку, я просто заменяю класс containerdiv на containerdivNewLine.

Answer 1

Вам нужно «очищать» поплавок после каждых 6 изображений. Так что с вашим текущим кодом измените стили для containerdivNewLine на:

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

Answer 2

Вы также можете использовать

<br style="clear:both" />

Answer 3

Попробуйте свойство clear .

Помните, что float удаляет элемент из макета документа - так что да, таким образом, он «вмешивается» в теги br и p, в том смысле, что он в основном игнорирует что-либо в макете основного потока .

Answer 4

Тоже такой способ

<br clear="all" />

Answer 5

Другой подход, который немного более семантический, состоит в том, чтобы UL определяли как общую ширину 6 изображений, каждый LI определяли как плавающий левый, а ширину определяли - так, чтобы при попадании LI # 7 он попадал в границы UL и выталкивается в новый ряд. У вас все еще будет открытое плавание, которое вы захотите очистить после / UL, но это можно сделать на следующем элементе страницы или в виде простого div. Вот такая идея, вам, возможно, придется возиться с реальными значениями, но это должно дать вам идею. Код немного чище.

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