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