打印時是否內嵌塊div工作？

我有一個非常複雜的單頁應用程序來管理數據。除此之外，它當然需要能夠打印該數據。大多數情況下，我的手都圍繞着從瀏覽器打印的內容，以及使用@page指令在CSS中播放的技巧。打印時是否內嵌塊div工作？

上週我遇到了一個問題，但我發現有點神祕。我試圖在卡片表格上打印數據 - 例如，在卡片紙上打印名稱標記，可能是每頁2列4行。我試圖做到這一點使用固定側的div，在div的CSS看起來是這樣的：

.badge { 
    display: inline-block; 
    width: 3.5in; 
    height: 2.5in; 
}

顯示在屏幕上很好，但是當我去打印，它是走出每在單獨一行中的徽章 - divs似乎沒有正確內聯。邊距很小，所以我不認爲是這就是問題所在。

我在這裏不知所措。打印時固定尺寸的內嵌塊不起作用嗎？我使用Chrome，如果這是相關的。我希望能夠在不使用服務器上的PDF格式的情況下完成這項工作。

來源

2015-03-02 Justin du Coeur

這應該工作：

<style> 
    .container { 
    width: 7in; /* This guarantees there will be enough room for 2 badges side-by-side */ 
    } 

    .badge { 
    box-sizing: border-box; /* You only need this if you add padding or borders */ 
    display: inline-block; 
    width: 3.5in; 
    height: 2.5in; 
    } 
</style> 

<div class="container"> 
    <div class="badge"> 
    Badge 1 
    </div><div class="badge"> <!-- DO NOT put line breaks between the badge divs! --> 
    Badge 2 
    </div><div class="badge"> 
    Badge 3 
    </div><div class="badge"> 
    Badge 4 
    </div> 
</div>

總之，7英寸寬div容器，保證你有足夠的寬度來調整兩個徽章並排側。此外，徽章divs之間沒有換行符，因爲換行符會變成空格，這將防止徽章在彼此旁邊裝配。最後，我將box-sizing: border-box添加到徽章CSS，以確保如果添加邊框或填充，寬度不會超過3.5in。

來源

2015-03-03 00:26:19 DoctorDestructo

我會試一試 - 謝謝！ – 2015-03-03 14:30:22

數量取決於您的屏幕尺寸。所以當屏幕的分辨率發生變化或打印頁面具有其他尺寸時，行數和列數。所以我建議你使用%作爲單位而不是in來重新調整寬度和高度，或者爲每個分辨率製作一個css風格。或者您可以使用HTML table tag。

因爲inline-block只是像其他「內聯元素」一樣對待元素並允許使用塊屬性。它並不精確多少列和行。

來源

2015-03-02 14:05:20 user3738165

整體來說，這是用於在表單上打印的：大小*是*硬編碼的，物理上的。而表格標籤不適用於這種情況，我所關心的只是打印單個單元格，而實際上並不關心行/列。 – 2015-03-03 14:32:09

打印時是否內嵌塊div工作？

回答

相關問題