Проблема печати HTML-div и разрыва страницы при использовании стилей float/position ⇐ Html

[Anonymous]

См. этот класс:

Код: Выделить всё

.divDutySlip {
width: 90mm;
min-height: 120mm;
padding: 2mm;
/*float:left;
position: relative; */
margin: 2mm;
border: 1px solid #000000;
page-break-inside: avoid;

}

Я закомментировал два стиля. Комментирование их приводит к правильному разрыву страницы. Никакая «Должная квитанция» не распределяется по странице:


Теперь, если я введу стили float и Position и попробую еще раз, логика разрыва страницы даст сбой. Если я попытаюсь напечатать альбомную ориентацию, я получу листы рядом, но они все равно разделятся на разрывы страниц. В этом примере гораздо больше контента, и я заблокировал имена:


Итак, как мне заполнить страницу этими пропусками и предотвратить разделение по разрывам страниц? На данный момент единственный способ сделать это — закомментировать эти стили и ограничиться одним столбцом квитанций.
CSS:

Код: Выделить всё

body {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
font-size: 12pt;
text-align: left;
color: #000000;
background-color: #ffffff;
}
.divDutySlip {
width: 90mm;
min-height: 120mm;
padding: 2mm;
/*float:left;
position: relative; */
margin: 2mm;
border: 1px solid #000000;
page-break-inside: avoid;

}
.textTitle {
font-size: 14pt;
font-weight: 700;
}
.textName {
font-size: 12pt;
}
.tableDutySlip {
width: 100%;
border:1px black solid;
border-collapse:collapse;
}
.tableDutySlip td {
border:1px black solid;
}
.cellHeading {
font-weight: 700;
background-color: #808080;
}
.cellDate {

}
.cellAssignments {

}
.columnDate {
width: 25%;
}
.columnAssignments {
width: 75%;
}

@media screen
{
br { display: none; }
}

HTML:

Код: Выделить всё

Assignment Duties




Assignment Duties
Test1





Date
Assignments


Thu, Apr 9
Mic Left, Mic Right


Sun, Apr 12
Watchtower Reader


Thu, Apr 16
Mic Left, Mic Right



Assignment Duties
Test2





Date
Assignments


Sun, Apr 12
Mic Left, Mic Right


Sun, Apr 19
Mic Left, Mic Right



Assignment Duties
test3





Date
Assignments


Sun, Apr 19
Watchtower Reader

Скрипка:
https://jsfiddle.net/e3kradLh/

Подробнее здесь: https://stackoverflow.com/questions/613 ... ion-styles