MVC5 печать нескольких частичный вид в A4

Question

У меня есть приложение, где я должен нужно напечатать «детали» вид, чтобы вписаться в одну страницу формата А4, я сумел это немного с некоторыми CSS, как показано ниже

<link rel="stylesheet" type="text/css" media="print" href="bootstrap.min.css"> 

@@media print { 
    .printest { 
     background-color: white; 
     height: auto; 
     min-height: 29.7cm; 
     width: auto !important; 
     min-width: 21cm; 
     position: fixed; 
     top: 0; 
     left: 0; 
     margin: 0; 
     padding:0px; 
     font-size: 9px;    
    } 

    .dl-horizontal > dd:after { 
     display: table; 
     content: ""; 
     clear: both; 
    } 

    .container { 
     display: flex; 
    } 

     .container > div { 
      flex: 1; 
     } 

     .container > dl { 
      flex: 1; 
     } 

    dl { 
     width: 100%; 
     background: #ff0; 
     padding: 0; 
     margin: 0; 
    } 

    dt { 
     float: left; 
     width: 50%; 
     background: #cc0; 
     padding: 0; 
     margin: 0; 
    } 

    dd { 
     float: right; 
     width: 49.5%; 
     background: #ff0; 
     padding: 0; 
     margin: 0; 
     border: 1px solid #000; 
    } 

    .maincolumns { 
     float: left; 
     width: 45%; 
    } 

    .no-print, .no-print * { 
     display: none !important; 
    } 

    a[href]:after { 
     content: none !important; 
    } 

    a { 
     content: none !important; 
    } 

    button { 
     content: none !important; 
    } 
} 

@@media screen { 
} 

@@page { 
    size: A4; 
} 

это работает отлично для одной страницы, но у меня есть еще один вид, где я называю несколько экземпляров указанной страницы «детали» в качестве частичной и нужно печатать эти, а также на бумаге формата А4 е или каждый экземпляр (частичный вид)

множественный детальный вид, как показано ниже:

@@media print { 
     .a4page { 
      background-color: white; 
      height: auto; 
      width: auto !important; 
      min-width: 21cm; 
      top: 0; 
      left: 0; 
      margin: 0; 
      font-size: 9px; 
      page-break-after:always; 
      page-break-before:always; 
      page-break-inside:avoid; 
      float: none!important; 
      overflow:visible!important; 
      position:relative; 

     } 

    .printest { 
     background-color: white; 
     height: auto; 
     min-height: 29.7cm; 
     width: auto !important; 
     min-width: 21cm; 
     position: fixed; 
     top: 0; 
     left: 0; 
     margin: 0; 
     font-size: 9px; 
    } 

    .dl-horizontal > dd:after { 
     display: table; 
     content: ""; 
     clear: both; 
    } 

    .container { 
     display: flex; 
    } 

     .container > div { 
      flex: 1; 
     } 

     .container > dl { 
      flex: 1; 
     } 

    dl { 
     width: 100%; 
     overflow: hidden; 
     background: #ff0; 
     padding: 0; 
     margin: 0; 
    } 

    dt { 
     float: left; 
     width: 50%; 
     background: #cc0; 
     padding: 0; 
     margin: 0; 
    } 

    dd { 
     float: right; 
     width: 50%; 
     background: #dd0; 
     padding: 0; 
     margin: 0; 
    } 

    .maincolumns { 
     float: left; 
     width: 50%; 
    } 

    .no-print, .no-print * { 
     display: none !important; 
    } 

    a[href]:after { 
     content: none !important; 
    } 

    a { 
     content: none !important; 
    } 

    button { 
     content: none !important; 
    } 
} 

<h1>Details</h1> 


<h3>@Html.DisplayFor(modelItem => modelItem.FirstOrDefault().Name)</h3> 
@foreach (var item in Model) 
{ 
    <div class="a4page"> 
     @Html.Partial("Details", item) 
    </div> 
} 

проблема у меня, что это все отпечатки на одной странице А4 поверх друг друга, создающей огромный беспорядок, как мне решить эту проблему d получить каждый из этих «Просмотр деталей» для печати на их собственной странице.

Answer 1

Вы должны располагать согласовывающим вверх, влево 0.

Попробуйте добавить DIV со стилем «страница-брейк-после: всегда» вокруг каждый «.a4page» и удалите стиль разрыва страницы из " .a4page '.