2

私はそのようなアイテムのペアを表示するWebページを持っています

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

どこから始めればよいですか？この件に関する私のグーグルフーは弱いです:(

4

3 に答える 3

1

Web ページを印刷しても表示されない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 に答える