2

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

[ 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...

我从哪里开始？我在这个主题上的 google fu 很弱:(

4

3 回答 3

2

利用媒体查询：

内联使用它们：

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

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

@media print {
    /* CSS Styling for the print page */
}
于 2013-10-24T23:06:13.430 回答
1

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

在您的样式表中，尝试类似：

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

提示：使用 Chrome 开发工具的“覆盖”选项卡，然后使用“模拟 CSS 媒体”并更改为“打印”。

注意：您也可以使用英寸为单位的宽度，但由于不同的浏览器在打印时可能有不同的边距，所以不要期望相同的总宽度是一致的。

于 2014-01-02T21:28:56.003 回答
0

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

@media print {
    /* CSS rules for printing here */
}
于 2013-10-24T22:58:37.357 回答