使用page-break-after之後在6個div後打破頁面？

這裏是我的打印頁的樣子，使用page-break-after之後在6個div後打破頁面？

enter image description here

這裏是我的html一瞥，

<style> 
    .container{ 
     float: left; 
     border: 1px solid Black; 
     width: 400px; 
     height: 350px; 
     margin: 10px; 
     padding: 10px; 
     page-break-inside: avoid; 
    } 
    .container img{ 
     max-width: 200px; 
     max-height: 200px; 
    } 
</style> 
<div class="container"> 
    <b>Name: </b>@Product.Name<br /> 
    <b>Model: </b>@Product.ModelNumber<br /> 
    <img src="@Product.ImagePath" /><br /> 
    <span style="font-size: 20px">DetailedDescriptions</span><br /> 
    @foreach(var attr in Product.DetailedDescriptions){ 
     @attr.Header<br /> 
    } 
    <span style="font-size: 20px">KeyAttributes</span><br /> 
    @foreach(var attr in Product.KeyAttributes){ 
     @attr.Name<br /> 
     @attr.Value<br /> 
    } 
</div>

如何，每6個div的後頁的分頁使用CSS

來源

2013-07-17 user960567

確保

你可以這樣做：

FIDDLE

.wrapper div:nth-child(6n) 
{ 
    margin-bottom: 300px; 
}

這意味着：每6個集裝箱後 - 添加X PX的底邊（怎麼過多少你需要的），因此它推下一個箱子到下一個頁面。

來源

2013-07-17 11:40:48 Danield

這看起來不錯。但我更喜歡page-break-XXX。以便它可以適用於任何維度。 – user960567

在你的問題你的容器是固定的高度 - 所以這應該爲你工作:) – Danield

@ user960567 - 看到這篇文章http：// stackoverflow。com/a/5314590/703717 – Danield

您可以使用

div:nth-of-type(6n) { 
    page-break-after:always; 
}

插入每個6格後分頁，但我認爲這不會與彩車工作。

來源

2013-07-17 11:41:14

不幸的是沒有工作。 – user960567

你應該封裝你的div和HTML創建這種類型的結構更合理：

<body> 
    <div class="container-holder"> 
     <div class="container-row"> 
      <div class="container"></div> 
      <div class="container"></div> 
     </div> 
     <div class="container-row"> 
      <div class="container"></div> 
      <div class="container"></div> 
     </div> 
     <div class="container-row"> 
      <div class="container"></div> 
      <div class="container"></div> 
     </div> 
    </div> 
    <div class="container-holder"> 
     <div class="container-row"> 
      <div class="container"></div> 
      <div class="container"></div> 
     </div> 
     <!-- keep adding more container-rows --> 
    </div> 
</body>

然後在CSS拿幾件事情考慮：

讓身體佔用整個頁面
使用page-break-inside：avoid;
讓在特定像素的寬度和高度，以的div
容器應具有顯示：內聯塊和垂直對齊：底部;
容器持有者應具有顯示：塊屬性
[獎金]避免內嵌樣式

下面是一個工作jsFiddle

我已經嘗試過的jsfiddle以外我得到這個結果：

print preview

來源

2013-07-17 12:17:45 acudars

如果這適用於您，請將此響應標記爲*回答* – acudars

好的，謝謝我會檢查 – user960567

該解決方案是否適合您？ – acudars

使用page-break-after之後在6個div後打破頁面？

回答

相關問題