如何使用Float（打印樣式表）修復此打印佈局？

我有多個圖表中的頁面柵格狀格式如下：如何使用Float（打印樣式表）修復此打印佈局？

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

每個圖表被顯示在一個包裝與float:left和在div圖表是在具有overflow: auto。這給出了所需的佈局將圖表包裝到屏幕寬度。

我遇到的問題是，在打印模式下，這隻打印一頁而失去其餘（第一頁爲空白）。我已經閱讀了一點點，並且瞭解大多數情況下的解決方案是打開應用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; 
}

來源

2009-01-23 KWorrall

你爲什麼要使用溢出：汽車;？溢出：隱藏;將導致div包含浮動的子元素。也許這是值得的 – roborourke 2009-01-23 11:59:08

聽起來像一個瀏覽器錯誤 - 這是什麼瀏覽器呢？ – bobince 2009-01-23 11:59:45

感謝提示桑丘，我會記住它。不幸的是，它仍然在做同樣的事情。瀏覽器是IE 7.有趣的是，在Mozilla中它看起來是一樣的。 – KWorrall 2009-01-23 14:25:05

我不知道你是否真的需要float: left其他東西，但你可以嘗試：

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

這也會將div放在彼此相鄰的位置，它對文檔的流程不會造成奇怪的影響。

來源

2009-01-29 00:43:10 jeroen

這是我在項目上遇到的一個問題，不幸的是我找不到直接的答案。 Jeroens的回答對我無效，因爲我還在每張圖片下顯示了一些標題文本，因此我需要顯示：塊行爲。我最終採取的方法如下：

首先我假設用戶將在A4紙上以縱向模式打印。我將它包含在頁面上的一個消息框中（'爲了獲得最佳效果，請以縱向模式打印...等），這些在打印時隱藏。
其次，你仍然可以浮動你的圖表，但你應該在每一行之後插入一個清除div。（我知道這在打印橫向模式時會弄亂佈局，因此我上面的第一點）。

[] [] [] []
-------結算DIV
[] [] [] []
-------清除DIV
[] [] [] []
等等

我也進了一步，並插入足夠的行後，頁面破div來一張A4紙（多少取決於圖像大小）。

我用這個以下樣式：

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

最後，做大量的跨瀏覽器測試的！我發現我必須使圖像非常小，以適應同一個網格佈局，以適應瀏覽器的一個頁面。這是由於不同瀏覽器使用的默認頁邊距的差異所致。

希望這會有所幫助。

來源

2010-10-20 08:25:38 benb

浮動不打印的CSS很好地工作，所以去掉浮體或浮動重寫他們：none和使用inline-block的替代：

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

來源

2014-09-25 09:00:19

在過去我有同樣的問題。自從我對解決方案持開放態度以來。我最喜歡的方法是使用<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>

來源

2016-04-11 14:50:24 user3806549

如何使用Float（打印樣式表）修復此打印佈局？

回答

相關問題