Вопросы Теги

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

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

Как я располагаю одно изображение сверху другого в HTML?

Однако теперь я не могу получить новую строку после 6-го изображения. Ни один
или

создайте новую строку. Они просто продвигают следующее изображение ниже на несколько пикселей, но изображение находится все еще в той же строке. Кажется, что стиль плавающий вмешивается в
и/или

.

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

Вот то, что я использую до сих пор:

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

69
задан Community 23 May 2017 в 12:10
поделиться

3 ответа

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

.containerdivNewLine { clear: both; float: left; display: block; position: relative; }
88
ответ дан 24 November 2019 в 13:46
поделиться

Другой подход, который немного более семантичен, состоит в том, чтобы указать UL как общую ширину 6 изображений, каждый LI определен как левое смещение, а ширина - определена, чтобы когда попадает 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>
0
ответ дан 24 November 2019 в 13:46
поделиться

Попробуйте использовать свойство clear .

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

4
ответ дан 24 November 2019 в 13:46
поделиться