打印网页时浮动div彼此相邻

Question

我有一个显示项目对的网页

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

在浏览器中很好，但我希望它们在打印的页面上显示如下。按ctrl + p时，预览会逐个显示所有列出的内容。

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

我从哪里开始？关于这个话题的我的谷歌很弱:(

Answer 1

利用媒体查询：

内联使用：

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

在合并的css文件中使用它们。

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

Answer 2

打印网页不会正确显示float或display: inline-block;。使用display: table-cell会使您的块级元素更像<td>个元素。此外，如果您必须包含一行单元格，则可以在逻辑上使用display: table-row来表现得像<tr>元素。

在样式表中，尝试以下内容：

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

提示：使用Chrome开发工具的“替换”标签，然后选择“模拟CSS媒体”并更改为“打印”。

注意：您也可以使用英寸宽度，但由于不同的浏览器在打印时可能会有不同的边距，因此不要指望相同的总宽度保持一致。

Answer 3

在CSS样式表中，为打印设置特殊的CSS规则：

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