Почему криво отображаются блоки?

Question

[DocTypeMaster]

Вывожу на пдф файл некоторые блоки ( карточки ) ,

<div style='width: 90mm; float: left; height: 50mm; border-radius: 4px; background: #ccc;padding: 5px;'>1<img src='http://qr-team/qrcodes/".$randstr.".png' style='width: 50px;'></div><br>
        <div style='width: 90mm; float: left; height: 50mm; border-radius: 4px; background: #ccc;padding: 5px;'>2<img src='http://qr-team/qrcodes/".$randstr.".png' style='width: 50px;'></div><br>
        <div style='width: 90mm; float: left; height: 50mm; border-radius: 4px; background: #ccc;padding: 5px;'>3<img src='http://qr-team/qrcodes/".$randstr.".png' style='width: 50px;'></div><br>
        <div style='width: 90mm; float: left; height: 50mm; border-radius: 4px; background: #ccc;padding: 5px;'>4<img src='http://qr-team/qrcodes/".$randstr.".png' style='width: 50px;'></div><br>

но что бы я не делал они выходят за пределы поля страницы. Подскажите как сделать так что-бы они все шли по очереди как бы это было скажем в бутстрапе если бы я дал каждому блоку кол-мд-6 ?

Comments

[Андрей]

display: flex? или они в данном случае не работают?

[edward_freedom]

Андрей, у него пали на флоатах сделано и я не понял, я не спец конечно в верстке, но чтобы высоту так определяли не помню 50mm

[Rustam Bainazarov]

Только сейчас понял, зачем тут mm. Ни разу не работал с ними для печати. Работают ли они вообще, кстати? Какой у вас формат бумаги и ориентация?

[DocTypeMaster]

Рустам Байназаров, я вообще для пробы поставил мм, думал хоть так заработает, но вообще мм и см нормально переносятся, формат стандартный, ничего не менял, да и не знаю как поменять его в этом пакете ларавел

[DocTypeMaster]

Андрей, попробовал во флекс обернуть блоки, но это лишь выровняло их в одну строку но они по прежнему залазят за края страницы

[Андрей]

DocTypeMaster, flex-wrap:wrap

[DocTypeMaster]

причем когда делаю вот так

<div style='width: 100%;'>
<div style='width: 50%; float: left; display: block; height: 30px; border-radius: 4px; background: #ccc;padding: 5px;'>1</div>
<div style='width: 50%; float: left; display: block;  height: 30px; border-radius: 4px; background: #ccc;padding: 5px;'>2</div>
<div style='width: 50%; float: left; display: block; height: 30px; border-radius: 4px; background: #ccc;padding: 5px;'>3</div>
</div>

то 2 куда - то пропадает

[DocTypeMaster]

Андрей,

<div style='display: flex;flex-wrap: wrap;'>
<div style='width: 50%; float: left; display: block; height: 30px; border-radius: 4px; background: #ccc;padding: 5px;'>1</div>
<div style='width: 50%; float: left; display: block;  height: 30px; border-radius: 4px; background: #ccc;padding: 5px;'>2</div>
<div style='width: 50%; float: left; display: block; height: 30px; border-radius: 4px; background: #ccc;padding: 5px;'>3</div>
</div>

не помогло - 2 элемент где-то делся

[Андрей]

DocTypeMaster, floatы уберите

[DocTypeMaster]

Андрей, они наложились на один и видно только 3 блок

[DocTypeMaster]

скорее всего это не реально, в пдф ему вообще плевать на то что я ему диктую , либо что-то все же делаю не так ((

Answer 1

[DocTypeMaster]

Нашел в чем проблема, оказалось что кодом css проблему не решить.
В официальной документации вот что нашел

Ячейки таблицы не доступны для страниц, то есть строка таблицы должна умещаться на одной странице.

То есть нужно делать так чтобы формировался скелет страницы с переносом строк заранее.