Как я могу исправить этот макет печати с помощью Float (в таблице стилей печати)?

Question

У меня есть страница с несколькими графиками в виде сетки, как показано ниже:

[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [ ]

Каждый график отображается в обертке с float:left, а у div, в котором находятся графики, есть overflow: auto. Это дает желаемый макет, оборачивающий диаграммы в ширину экрана.

Проблема, с которой я столкнулся, заключается в том, что в режиме печати она печатает только одну страницу, а остальную теряет (также первая страница пуста). Я немного прочитал и понимаю, что решение в большинстве случаев состоит в том, чтобы включить команду apply float:none, которая решает вышеуказанные проблемы ... Но я теряю формат сетки и хочу, чтобы на печатной странице было более одного столбца диаграмм.

Как я могу это исправить?

Я использую таблицу стилей печати, но вот стили экрана:

.chartSpace  /* surrounds all charts */
{
    padding-top: 20px;
    width: auto;
    overflow: auto;
}

.chartWrapper /* wrapper for each chart */
{
    float: left;
    padding: 0 20px 0 0;
}

Answer 1

Float плохо работает в print css, поэтому удалите float или переопределите его с помощью float: none и используйте вместо него inline-block:

.chartWrapper {
    float: none;
    display: inline-block;
    vertical-align: top;
    padding: 0 20px 0 0;
}

Answer 2

Я не знаю, действительно ли вам нужен float: left для других вещей, но вы можете попробовать:

/* wrapper for each chart */
.chartWrapper { display: inline; padding: 0 20px 0 0; }

Это также поместит div рядом друг с другом, и это не будет делать странные вещи с потоком документа.

Answer 3

В прошлом у меня была такая же проблема. С тех пор я следил за решениями. Мой любимый метод - использование элемента <table>. И создайте другую страницу для печати. Грузы работы, но в конце концов это того стоит. Так как мне нужно было для выставления счетов. И мои клиенты действительно не могли получить безобразный счет.

Пример:

<table style="width: 100%;">
  <tr>
    <td>Alek Rasschaert</td>
    <td style="width: 60%"></td>
    <td>Mobile Express</td>
  </tr>
  <tr>
    <td>Diestsesteenweg 93</td>
    <td style="width: 60%"></td>
    <td>Diestsesteenweg 93</td>
  </tr>
  <tr>
    <td>3010 Kessel-Lo</td>
    <td style="width: 60%"></td>
    <td>3010 Kessel-Lo</td>
  </tr>
</table>

Answer 4

Это проблема, с которой я столкнулся в проекте, и, к сожалению, я не нашел простого ответа. Ответ Jeroens не сработал для меня, так как я также отображал текст заголовка под каждым изображением, поэтому мне нужно было отобразить: поведение блока. Подход, который я выбрал, заключается в следующем:

• Сначала я сделал предположение, что пользователь будет печатать на бумаге формата А4 в портретном режиме. Я включил это в окно сообщения на странице («для достижения наилучших результатов, пожалуйста, печатайте в портретном режиме ... и т. Д.), Которое скрыто при печати.
• Во-вторых, вы все еще можете использовать свои графики, но вы должны вставлять очищающий div после каждой строки. (Я знаю, что это портит макет при печати в альбомной ориентации, поэтому мой первый пункт выше).

[] [] [] []
------- очистка div
[] [] [] []
------- очистка div
[] [] [] []
и т.д ...

• Я также пошел еще дальше и вставил разделительный элемент после достаточного количества строк, чтобы заполнить страницу формата А4 (сколько зависит от размера вашего изображения).

Для этого я использовал следующие стили:

div.pageBreak {
    page-break-after: always;
    visibility:hidden;
    height:1px !important;
    margin:0;
}

Наконец, проведите множество кросс-браузерных тестов! Я обнаружил, что должен был сделать изображения достаточно маленькими, чтобы одна и та же компоновка сетки помещалась на одной странице в браузерах. Это связано с различиями в полях страницы по умолчанию, которые используются различными браузерами.

Надеюсь, это поможет.