Question

我正在尝试使用HTML和PHP设计收据。我设法创建了正确的布局，但是我需要将div旋转到90度。但它似乎溢出到顶部。我必须将 margin-top：485px 设置为下面的右侧表的代码，以适合顶部。

<div class="rotate">

由于内容将来可能会变长或变短，所以我不想固定边距。

我的密码

.pagebreak {
  page-break-after: always;
  max-width: 8cm;
  word-wrap: break-word;
}

.rotate {
  -webkit-transform: rotate(-90deg) translate3d( 0, 0, 0);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>


  <div class="pagebreak">
    <div class="rotate">
      <label class="font-weight-bold text-center">SOME TITLE</label>
      <table class="table">
        <thead class="thead">
          <tr colspan="3" class="">

          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="text-nowrap">
              <div>
                <label class="font-weight-bold" style="font-size:24px;">Seat No :
                                    D6                                </label>
              </div>
              <div id="label0" class="font-weight-bold" style="display:inline-block;" title="2BDA5339-3DAC-48DD-C1C2-8AA7D327A666"><canvas width="75" height="75" style="display: none;"></canvas><img alt="Scan me!" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAEcElEQVR4Xu2c626sMBCD2fd/6D1iVbohG+ezEyqtDum/CsjF4/F4Au1j27bnNvDzfLYfezwep9Hq++rrx83Hfcd19btaKo17PKfucyDYd7bAcpDatu0XLMWUehwVecUQtQ5ijstQGofWTziV61hgAVpdsCj3a2YpLVBaRVpXM4U0jTSM1uHud5/ng1nuwyTctEhKD5WGKlg0Xh1UFZSenPwZWPWkVI3cakjVjDSMNHeBVdDuK8CiNKC0UkxU6eNWMZIDV3Yu1axbgpVGzBXcWYaQj0urbOorm8xaYJ0RaPosAqm+nlavb7s/3e+JWenD37b5dD3pfl9gPd3kFaMn1WQfgqoTbYI6iNnxe/MvsCg6pUcjZrmOWTl0t9dzHb9b9VT1pdOMXtVGZi2w3sd9H2BROzAqpKOMoCxJNcrVvNZ9C6yfaDjH2faxsnukQVqRMozGI61zTyFUh1Cud4ElXrBYaaiqmoqgaqCV4ycNUuO5jCTfR/tTDOuaUnfSBdZu7X/oST5p1F+5ESZNcrSmDChZoSlmLbDeL40/BH7UR6Va5GpaesI6mhGkiS/Nqt9IL7DOYTydZ6neMI0QCT0dbrgMoqrs9n5p1bWqoatZtwLL7Zl6XXmr6rgOOg3KVetNMui3N7xqcmpPqPF10+iq9UZg0SdH7uZSBqU+i/yU+5Ypve+ULQustulpmdePNOw52P0aVTWXMeRrSMPIiafPUwadqqFbuhdYHftNh2IkyK5GjDLSDTJpHvW4XZ/lVrVbgXUIvMpZcswEaqqBpEXUU1LwiEG95+U3pe6ktwKLekNihmKeC/asJlKP5zKVMsvqDRdY73DgEU2qWaQpM5rRKdryZJf8U9I2LbCq43Olwc00pMYyZQ45acUWWkfai5LfI+1cYBWRssBSPou0pUfXVxTg5WVPf/Zr6RtwsjCudvU0Gv92hywACaRbTVV6q9KfNuKXgHX4LAJFMU0xxNUUAtPVvNn104uak2bNTkbMINNHoND66DoF2wKLekOX7qRh5LTVdfJ5bpUjjVTzlEHA3nCBVbyRrnvDUcEeTaOrmEFpREEnBls+iyxEah6VoLubSQtKGozeSbD9meQVpdfxXylotK7ZDqF8foH18y8XnGoqP5McjTBNSudLZDEojWn8tCo2q6HySVTSXVNJPscp3eVaSNBdUFwNbAp8Osls9aRgUJVV/o4Y7vrCE7Poz1EIvFuBRa/vXZqOvnx104lOISiN03la+7a/g1eaRj4mTTNKOxJwshKuL+yClTIjjZR7vkWnFQp8Yh5Vd2c/eJ7lLi5lhHs/BZGYQm0MnZB2G2k6bKPBU8ecps1s8EiDe7Ix/e9VXM1yQXbvI8tAaTniK6fBcq0FOW8qBLQ5F2Q3uJbAp2m4wGogQFWKQK7ThqwIMcnVrpTRPWd/WRreEiw3rdzTARrPFWLyQaProfnLcad9FqXXfwkWbcrVELexdjUrifw+Jp02UDXstVPTvSEJrcs819FT0BZYDcaoNuYvwfoHyIOmDZblgGQAAAAASUVORK5CYII="
                  style="display: block;"></div>
              <script type="text/javascript" defer="">
                // new QRCode(document.getElementById("qrcode"), "f738feb9-2f14-971b-f7b9-265755dfe795");
                var qrcode = new QRCode("label0", {
                  text: "2BDA5339-3DAC-48DD-C1C2-8AA7D327A666",
                  width: 75,
                  height: 75,
                  colorDark: "#000000",
                  colorLight: "#ffffff",
                  correctLevel: QRCode.CorrectLevel.H
                });
              </script>
            </td>
            <td class="text-nowrap">
              <div><label class="font-weight-bold">Counter ID : PN001</label></div>
              <div><label class="font-weight-bold">Ticket ID : 7</label></div>
              <div><label class="font-weight-bold">Title : The Accidental Astronauts</label></div>
              <div><label class="font-weight-bold">Category : Adult</label></div>
              <div><label class="font-weight-bold">Type : Film</label></div>
              <div><label class="font-weight-bold">Location : ROOM1</label></div>
            </td>
            <td class="text-nowrap">
              <div><label class="font-weight-bold">Date : 21-02-2019</label></div>
              <div><label class="font-weight-bold">Showtime : 12:30 AM - 11:30 PM</label></div>
              <div><label class="font-weight-bold">Price : RM 12.00</label></div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>

</html>

当前输出：图片被切半

旋转div后的预期输出：

Answer 1

.rot90 {
    -webkit-transform: translateY(-100%) rotate(90deg); /* Safari */
    -moz-transform: translateY(-100%) rotate(90deg); /* Firefox 3.6 Firefox 4 */
    /*-moz-transform-origin: right top; */
    -ms-transform: translateY(-100%) rotate(90deg); /* IE9 */
    -o-transform: translateY(-100%) rotate(90deg); /* Opera */
    transform: translateY(-100%) rotate(90deg); /* W3C */  
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
}

旋转div后如何设置页边距自动适合顶部

1 个答案: