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

То, что я пытаюсь сделать, это иметь строки изображений, 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'.

Ответы

Ответ 1

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

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

Ответ 2

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

<br style="clear:both" />

Ответ 3

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

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

Ответ 4

Другой подход, в котором немного больше семантики, состоит в том, чтобы UL определялся как ваша общая ширина изображения 6, каждый LI определялся как float left и width defined - так, что когда LI # 7 попадает, он сталкивается с границей UL, и подталкивается к новой строке. У вас все еще будет открытый float, который вы хотите очистить после /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>