CSS Ландшафтное выравнивание печатных букв

При попытке напечатать в виде буквы и пейзажа, чтобы я мог использовать всю ширину страницы, два divs не совпадают друг с другом. Однако, когда я пытаюсь и печатаю с «@size a4 landscape», два divs выравниваются. Что мне не хватает на моем CSS-принтере, который заставит их выравниваться так же, как на экране.CSS Ландшафтное выравнивание печатных букв

<style> 
 
    @media print { 
 
     .column-left { 
 
     float: left; 
 
     width: 30%; 
 
     } 
 
     .column-right { 
 
     float: right; 
 
     width: 30%; 
 
     } 
 
     .column-center { 
 
     display: inline-block; 
 
     width: 40%; 
 
     } 
 
     th.vendorListHeading { 
 
     background-color: #ec6619 !important; 
 
     -webkit-print-color-adjust: exact; 
 
     font-size: small; 
 
     width: inherit; 
 
     } 
 
     th.vendorListHeading1 { 
 
     background-color: #666666 !important; 
 
     -webkit-print-color-adjust: exact; 
 
     font-size: small; 
 
     } 
 
     thead.vendorListHeading2 { 
 
     background-color: #666666 !important; 
 
     -webkit-print-color-adjust: exact; 
 
     font-size: small; 
 
     } 
 
     td.forPrintingonlyfortd { 
 
     color: -internal-quirk-inherit; 
 
     font-size: small; 
 
     font-weight: normal; 
 
     font-variant: normal; 
 
     font-style: normal; 
 
     } 
 
     .StandardTable thead tr th { 
 
     background-color: #666666 !important; 
 
     -webkit-print-color-adjust: exact; 
 
     font-size: small; 
 
     } 
 
     @page { 
 
     size: letter landscape; 
 
     } 
 
     body { 
 
     height: 100%; 
 
     width: 100%; 
 
     } 
 
     .table { 
 
     width: 100%; 
 
     max-width: 100%; 
 
     margin-bottom: 5px; 
 
     border: 1px solid #ec6619; 
 
     } 
 
     .table>tbody>tr>td, 
 
     .table>tbody>tr>th, 
 
     .table>tfoot>tr>td, 
 
     .table>tfoot>tr>th, 
 
     .table>thead>tr>td, 
 
     .table>thead>tr>th { 
 
     padding: 3px; 
 
     } 
 
     .table>thead>tr>th { 
 
     padding: 3px; 
 
     } 
 
     .table-condensed>tbody>tr>td, 
 
     .table-condensed>tbody>tr>th, 
 
     .table-condensed>tfoot>tr>td, 
 
     .table-condensed>tfoot>tr>th, 
 
     .table-condensed>thead>tr>td, 
 
     .table-condensed>thead>tr>th { 
 
     padding: 3px; 
 
     } 
 
     img { 
 
     width: 100%; 
 
     } 
 
     a[href]:after { 
 
     content: none; 
 
     } 
 
     td.forPrintingonlyforTd { 
 
     color: -internal-quirk-inherit; 
 
     font-size: small; 
 
     font-weight: normal; 
 
     font-variant: normal; 
 
     font-style: normal; 
 
     } 
 
     .container { 
 
     padding-right: 15px; 
 
     padding-left: 15px; 
 
     margin-right: auto; 
 
     margin-left: auto; 
 
     } 
 
     .col-md-6 { 
 
     float: left; 
 
     width: 50%; 
 
     } 
 
    } 
 
    </style>

<HTML> 
 

 

 

 
<HEAD> 
 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
</HEAD> 
 

 

 

 
<body> 
 

 

 

 

 

 

 
    <div class="container"> 
 

 

 

 

 

 
    <table class="table" border="1"> 
 

 

 
     <tr> 
 

 
     <td> 
 
      <table class="table" border="1"> 
 

 
      <tr> 
 

 
       <th width="70%" bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font> 
 
       </th> 
 
      </tr> 
 

 

 

 
      <tbody> 
 
       <tr> 
 
       <td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </td> 
 

 
     <td> 
 
      <table class="table" border="1"> 
 

 
      <tr> 
 

 
       <th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font> 
 
       </th> 
 
      </tr> 
 

 

 

 
      <tbody> 
 
       <tr> 
 
       <td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </td> 
 

 
     <td> 
 
      <table class="table" border="1"> 
 

 
      <tr> 
 

 
       <th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font> 
 
       </th> 
 
      </tr> 
 

 

 

 
      <tbody> 
 
       <tr> 
 
       <td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </td> 
 

 
     <td> 
 
      <table class="table" border="1"> 
 

 
      <tr> 
 

 
       <th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font> 
 
       </th> 
 
      </tr> 
 

 

 

 
      <tbody> 
 
       <tr> 
 
       <td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </td> 
 

 
     <td> 
 
      <table class="table" border="1"> 
 

 
      <tr> 
 

 
       <th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font> 
 
       </th> 
 
      </tr> 
 

 

 

 
      <tbody> 
 
       <tr> 
 
       <td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </td> 
 

 

 

 
     </tr> 
 
    </table> 
 
    <table class="table" border="1"> 
 
     <tr> 
 

 
     <td> 
 
      <table class="table" border="1"> 
 

 
      <tr> 
 

 
       <th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font> 
 
       </th> 
 
      </tr> 
 

 

 

 
      <tbody> 
 
       <tr> 
 
       <td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </td> 
 

 
     <td> 
 
      <table class="table" border="1"> 
 

 
      <tr> 
 

 
       <th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font> 
 
       </th> 
 
      </tr> 
 

 

 

 
      <tbody> 
 
       <tr> 
 
       <td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </td> 
 

 

 

 
     <td> 
 
      <table class="table" border="1"> 
 

 
      <tr> 
 

 
       <th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font> 
 
       </th> 
 
      </tr> 
 

 

 

 
      <tbody> 
 
       <tr> 
 
       <td class="forPrintingonlyforTd"> 
 
        Title 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </td> 
 

 

 
     <td> 
 
      <table class="table" border="1"> 
 

 
      <tr> 
 

 
       <th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font> 
 
       </th> 
 
      </tr> 
 

 

 

 
      <tbody> 
 
       <tr> 
 
       <td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </td> 
 
     <td> 
 
      <table class="table" border="1"> 
 

 
      <tr> 
 

 
       <th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font> 
 
       </th> 
 
      </tr> 
 

 

 

 
      <tbody> 
 
       <tr> 
 
       <td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </td> 
 
     <td> 
 
      <table class="table" border="1"> 
 

 
      <tr> 
 

 
       <th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font> 
 
       </th> 
 
      </tr> 
 

 

 

 
      <tbody> 
 
       <tr> 
 
       <td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </td> 
 

 

 

 
     </tr> 
 

 

 

 

 

 

 

 

 

 

 

 
    </table> 
 

 

 

 
    <div class="container"> 
 

 
     <div class="col-md-6"> 
 

 
     <table class="table" border="1"> 
 

 
      <tr> 
 

 
      <td> 
 

 
       <a href="" target="_blank"></a> 
 
       <img src="" alt="" /> 
 

 
      </td> 
 
      </tr> 
 

 
     </table> 
 

 
     </div> 
 
     <div class="col-md-6"> 
 

 

 

 

 

 
     <table class="table" border="1"> 
 

 
      <tr> 
 

 
      <th bgcolor="ec6619" class="vendorListHeading" align="left"><font color="FFFFFF">Title</font> 
 
      </th> 
 

 

 

 

 
      <tbody> 
 
       <tr> 
 
       <td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 

 

 
     </table> 
 

 
     <table class="table" border="1"> 
 

 
      <tr> 
 

 
      <th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font> 
 
      </th> 
 
      </tr> 
 

 

 

 
      <tbody> 
 
      <tr> 
 
       <td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 

 

 
     </table> 
 
     <table class="table" border="1"> 
 

 
      <tr> 
 

 
      <th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF"> Title</font> 
 
      </th> 
 
      </tr> 
 

 

 

 
      <tbody> 
 
      <tr> 
 
       <td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 

 

 
     </table> 
 

 
     <table class="table" border="1"> 
 

 
      <tr> 
 

 
      <th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF"> Title</font> 
 
      </th> 
 
      </tr> 
 

 

 

 
      <tbody> 
 
      <tr> 
 
       <td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 

 
     </table> 
 

 
     <table class="table" border="1"> 
 

 
      <tr> 
 

 
      <th bgcolor="ec6619" align="left" class="vendorListHeading"><font color="FFFFFF">Title</font> 
 
      </th> 
 
      </tr> 
 

 

 

 
      <tbody> 
 
      <tr> 
 
       <td class="forPrintingonlyforTd"><font color="FFFFFF">Title</font> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 

 
     </table> 
 

 

 

 
     </div> 
 

 
    </div> 
 

 

 
</body> 
 

 
</html>

источник

2016-05-19 JqueryHelp

Возможно, это глупый вопрос, но поможет ли он исправить все ошибки в вашем источнике? –

Lister, о чем вы говорите? – JqueryHelp

Ошибки в HTML. [Валидатор W3C] (https://validator.w3.org) сообщает 8 ошибок и 5 предупреждений, и они даже не подсчитывают все отсутствующие значения '#' s в цветовых значениях. Когда я запускаю его через свой собственный валидатор, я получаю 36 ошибок в режиме HTML или 44 ошибки в режиме XHTML. –

Lister,

я сделал правильно эти ошибки и был в состоянии выяснить причину. Проблема заключалась в том, что я не включал col-md-6 под class = "row". Когда col-md-6 находились под div class = "row", он показывался правильно везде.

источник

2016-05-25 21:25:10 JqueryHelp

CSS Ландшафтное выравнивание печатных букв

ответ

Смежные вопросы