CSS 横向字母打印对齐方式

在尝试打印为字母和横向时，以便我可以使用页面的整个宽度，两个div彼此不对齐。但是，当我尝试使用"@size a4 横向"打印时，两个div 对齐。我在打印 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>

Lister，

我确实纠正了这些错误，并能够找出根本原因。问题是我没有在class="row"下包含col-md-6。一旦 col-md-6 在div class="row" 下，它就会在任何地方正确显示。

相关内容

最新更新

热门标签：