макет печатного носителя css с заголовком и двумя колонками, расположенными сверху вниз - PullRequest
0 голосов
/ 27 октября 2018

возможно ли разместить заголовок на всех печатаемых страницах

возможно ли иметь основное тело с двумя столбцами, которые текут из первого столбца, затем во второй столбец и затем к следующемустраница и с рамкой в ​​середине столбцов

макет демонстрируется https://www.scribd.com/document/391754619/Example

пока что у меня есть, но я не далеко ушел

<code><style>
    body {
        font-family: cursive;
        font-size: 16px;
        margin: 0;
        padding: 10px;
    }

    p,
    h4 {
        padding: 0;
        margin: 2px 0 2px 0;
    }

    .headings {
        text-align: center;
        position: fixed;
        top: 10px;
        left: 10px;
        right: 0;
    }

    .headings>h4 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .headingsTable {
        width: 100%;
        text-align: left;
    }

    .patiItem {
        margin-top: 90px;
    }

    .patiItem {
        display: inline-grid;
        width: calc(50% - 5px);
        vertical-align: top;
    }

    @page {
        size: A4;
    }

    @media print {
        .headings {
            position: fixed;
            top: 10px;
        }
        h4,
        p {
            page-break-inside: avoid;
        }
    }
</style>


<body>
<div class="headings">
    <h4>Progress notes</h4>
    <table class="headingsTable">
        <tbody>
            <tr>
                <td><b>Name</b> - Chiyembekezo Lakudzala</td>
                <td><b>Nuero number</b> - 123</td>
                <td><b>Hospital</b> number 12345</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="notes">
    <div class="patiItem">
        <div class="patiItemFixed">
            <p>Seen by Lorem ipsum</p>
            <p>Day 034 Lorem ipsum</p>
            <p>Night duty report</p>
            <p>Date: 23/October/2018</p>
            <p>08:16 am</p>
        </div>
        <div class="side">
            <h4>Issues:</h4>
            <pre>Sed pharetra lorem vel sem varius, id iaculis urna fermentum. Maecenas luctus ut tellus fringilla facilisis. Suspendisse augue ipsum, faucibus at orci rutrum, volutpat malesuada ipsum.

Экзамен:

Donec mattis nulla id sapien accumsan pulvinar. Duis quis mauris elementum mauris porttitor hendrerit vel in augue. Nam a felis non justo luctus fermentum scelerisque vel eros

Впечатление:

Quisque sodales interdum nulla eget auctor. Mauris pretium fermentum ex ut ultrices. Vivamus placerat laoreet odio sit amet vehicula

План:

Phasellus sagittis felis quam. Donec hendrerit auctor ipsum nec placerat. Praesent hendrerit tristique est eget porttitor.

При осмотре Lorem ipsum

День 034 Lorem ipsum

Отчет по ночному дежурству

Дата: 23 октября / 2018

08: 16:00

Вопросы:

Sed pharetra lorem vel sem varius, id iaculis urna fermentum. Maecenas luctus ut tellus fringilla facilisis. Suspendisse augue ipsum, faucibus at orci rutrum, volutpat malesuada ipsum.

Экспертиза:

Donec mattis nulla id sapien accumsan pulvinar. Duis quis mauris elementum mauris porttitor hendrerit vel in augue. Nam a felis non justo luctus fermentum scelerisque vel eros

Показы:

Quisque sodales interdum nulla eget auctor. Mauris pretium fermentum ex ut ultrices. Vivamus placerat laoreet odio sit amet vehicula

План:

Phasellus sagittis felis quam. Donec hendrerit auctor ipsum nec placerat. Praesent hendrerit tristique est eget porttitor.

При осмотре Lorem ipsum

День 034 Lorem ipsum

Отчет по ночному дежурству

Дата: 23 октября / 2018

08: 16:00

Вопросы:

Sed pharetra lorem vel sem varius, id iaculis urna fermentum. Maecenas luctus ut tellus fringilla facilisis. Suspendisse augue ipsum, faucibus at orci rutrum, volutpat malesuada ipsum.

Экспертиза:

Donec mattis nulla id sapien accumsan pulvinar. Duis quis mauris elementum mauris porttitor hendrerit vel in augue. Nam a felis non justo luctus fermentum scelerisque vel eros

Впечатления:

Quisque sodales interdum nulla eget auctor. Mauris pretium fermentum ex ut ultrices. Vivamus placerat laoreet odio sit amet vehicula

План:

Phasellus sagittis felis quam. Donec hendrerit auctor ipsum nec placerat. Praesent hendrerit tristique est eget porttitor.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...