Плавающие дивы рядом друг с другом при печати веб-страницы

Question

У меня есть веб-страницу, которая отображает пары элементов, как такой

[ item 1 ] [ item 2 ] 
[ item 3 ] [ item 4 ] 
[ item 5 ] [ item 6 ] 
[ item 7 ] [ item 8 ] 

Fine в браузере, но я хочу, чтобы отобразить как это на напечатанной странице. При нажатии ctrl + p предварительный просмотр показывает все перечисленные один за другим.

[ item 1 ] 
[ item 2 ] 
[ item 3 ] 
[ item 4 ] 
etc... 

С чего начать? Мой Google фу на эту тему слабый :(

Answer 1

В вашем стиле CSS листа, установить специальные правила CSS для печати:

@media print { 
    /* CSS rules for printing here */ 
} 

Answer 2

Сделать использование медиа-запросов:

Используйте их рядный :

<link rel='stylesheet' media='print' href='filepath.css'/> 

Используйте их в комбинированном CSS-файле

012.

@media print { 
    /* CSS Styling for the print page */ 
} 

Answer 3

Печать страницы не отображает float или display: inline-block; правильно. Использование display: table-cell приведет к тому, что элементы вашего уровня блока будут больше похожи на элементы <td>. Кроме того, если вы должны содержать строку ячеек, вы можете логически использовать display: table-row, чтобы вести себя как элемент <tr>.

В таблице стилей, попробовать что-то вроде:

@media print { 
    .item-class { 
     display: table-cell; 
     width: 50%; 
    } 
} 

Совет: вкладки с помощью Chrome Dev Tools' "Переопределение", а затем "Эмуляция CSS медиа" и изменения в "печать".

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