Flex替代品

Flex替代品

关注
发信
关注(28)粉丝(399)

html - HTML Flex替代品

我正在尝试为我的项目设计票证，其设计如下
html - HTML Flex替代品-LMLPHP

它在浏览器中正常工作，但我想将其转换为PDF并通过电子邮件发送给用户。

当我使用wkhtmltopdf将其转换为PDF时，输出要小得多，并且由于wkhtmltopdf不支持flexbox，所以CSS看起来也有所不同。

这是jsfiddle在这里我试图实现相同的目的，但不使用flex。只是qr代码部分不在左侧。



*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  color: #363c44;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
}

.ticket-design {
  top: 50%;
  left: 50%;
  background: #fff;
  border: 2px solid #99d298;
  box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
  overflow: hidden;
}

.ticket-design small {
  display: block;
  font-size: 11px;
  color: #a2a9b3;
  margin-bottom: 2px;
}

.ticket-design header {
  padding: 12px 20px;
  height: 53px;
  /*border: 1px solid #99d298;*/
}

.ticket-design header .logo img {
  float: left;
  width: 104px;
  height: 31px;
}

.ticket-design .rightSection .eventDetails {
  position: relative;
}

.ticket-design .rightSection .eventDetails::after {
  content: '';
  display: table;
  clear: both;
}

.ticket-design .rightSection .eventDetails .eventDetail {
  padding: 20px 18px;
  float: left;
}

.ticket-design .rightSection .eventDetails .eventDetail:nth-child(2) {
  float: right;
}

.ticket-design .rightSection .eventDetails .eventDetail strong {
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}

.ticket-design .rightSection .eventDetails .eventDetail small {
  margin-bottom: 0;
  margin-left: 3px;
}

.ticket-design .rightSection .infos {
  border-top: 2px solid #99d298;
  border-bottom: 2px solid #99d298;
}

.ticket-design .rightSection .infos .places,
.ticket-design .rightSection .infos .times {
  width: 50%;
  padding: 10px 0;
}

.ticket-design .rightSection .infos .places::after,
.ticket-design .rightSection .infos .times::after {
  content: '';
  display: table;
  clear: both;
}

.ticket-design .rightSection .infos .times strong {
  transform: scale(0.9);
  transform-origin: left bottom;
}

.ticket-design .rightSection .infos .places {
  border-right: 1px solid #99d298;
}

.ticket-design .rightSection .infos .places small {
  color: #97a1ad;
}

.ticket-design .rightSection .infos .box {
  padding: 10px 20px 10px;
  float: left;
}

.ticket-design .rightSection .infos .box small {
  font-size: 10px;
}

.ticket-design .mainSection {
  border-top: 2px solid #99d298;
}

.ticket-design .mainSection .leftSection {
  width: 20%;
  position: relative;
}

.ticket-design .mainSection .leftSection .qrcode img {
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  bottom: 55%;
  left: 0;
  right: 0;
  margin: auto;
}

.ticket-design .mainSection .rightSection {
  width: 80%;
  padding: 10px 0;
}

.ticket-design .mainSection .leftSection::after,
.ticket-design .mainSection .times::after {
  content: '';
  display: table;
  clear: both;
}

.ticket-design .mainSection .times strong {
  transform: scale(0.9);
  transform-origin: left bottom;
}

.ticket-design .mainSection .leftSection {
  border-right: 2px solid #99d298;
}

.ticket-design .mainSection .box {
  padding: 10px 20px 10px;
  float: left;
  font-size: 13px;
}

.ticket-design .mainSection .box small {
  font-size: 10px;
}

.ticket-design .strap {
  clear: both;
  position: relative;
  /*border-top: 1px solid #99d298;*/
}

.ticket-design .strap::after {
  content: '';
  display: table;
  clear: both;
}

.ticket-design .strap .box {
  padding: 23px 0 20px 20px;
}

.ticket-design .strap .box div {
  margin-bottom: 15px;
}

.ticket-design .strap .box div small {
  font-size: 10px;
}

.ticket-design .strap .box div strong {
  font-size: 13px;
}

.ticket-design .strap .box sup {
  font-size: 8px;
  position: relative;
  top: -5px;
}

.ticket-design .strap .eventLogo img {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 200px;
  height: 100px;
}

<div class="ticket-design">
  <header>
    <div class="logo">
      <img src="https://i.stack.imgur.com/I7wrc.png">
    </div>
  </header>
  <div class="mainSection">
    <div class="leftSection">
      <div class="qrcode">
        <img src="https://i.stack.imgur.com/Rdojb.png">
      </div>
    </div>
    <div class="rightSection">
      <div class="eventDetails">
        <div class="eventDetail">
          <small>Demo Name</small>
          <strong>Ticketing Event</strong>
        </div>
      </div>
      <div class="infos">
        <div class="places">
          <div class="box">
            <small>Date and Time</small>
            <strong>Sunday 30th July 17 (12:00pm/4:00pm)</strong>
          </div>
        </div>
        <div class="times">
          <div class="box">
            <small>Location</small>
            <strong>97-99 Pitt Street
Sydney, New South Wales
Australia, 2000</strong>
          </div>
        </div>
      </div>
      <div class="strap">
        <div class="box">
          <div class="passenger">
            <small>Ticket Type</small>
            <strong>Day 2 Ticket</strong>
          </div>
          <div class="date">
            <small>Payment Status</small>
            <strong>AUD 30</strong>
          </div>
        </div>
        <div class="eventLogo">
          <img src="https://i.stack.imgur.com/I7wrc.png">
        </div>
      </div>
    </div>
  </div>
</div>

最佳答案 

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  color: #363c44;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
}

.ticket-design {
  top: 50%;
  left: 50%;
  background: #fff;
  border: 2px solid #99d298;
  box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
  overflow: hidden;
}

.ticket-design small {
  display: block;
  font-size: 11px;
  color: #a2a9b3;
  margin-bottom: 2px;
}

.ticket-design header {
  padding: 12px 20px;
  height: 53px;
}

.ticket-design header .logo img {
  float: left;
  width: 104px;
  height: 31px;
}

.ticket-design .rightSection .eventDetails {
  position: relative;
}

.ticket-design .mainSection:after,
.ticket-design .mainSection .leftSection::after,
.ticket-design .mainSection .times::after,
.ticket-design .rightSection .infos:after,
.ticket-design .rightSection .eventDetails::after,
.ticket-design .rightSection .infos .places::after,
.ticket-design .rightSection .infos .times::after,
.ticket-design .strap::after {
  content: '';
  display: table;
  clear: both;
}

.ticket-design .rightSection .eventDetails .eventDetail {
  padding: 20px 18px;
  float: left;
}

.ticket-design .rightSection .eventDetails .eventDetail:nth-child(2) {
  float: right;
}

.ticket-design .rightSection .eventDetails .eventDetail strong {
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}

.ticket-design .rightSection .eventDetails .eventDetail small {
  margin-bottom: 0;
  margin-left: 3px;
}

.ticket-design .rightSection .infos {
  border-top: 2px solid #99d298;
  border-bottom: 2px solid #99d298;
  width: 100%;
}

.ticket-design .rightSection .infos .places,
.ticket-design .rightSection .infos .times {
  width: 50%;
  height: 80px;
  padding: 10px 0;
}

.ticket-design .rightSection .infos .places {
  float: left;
}

.ticket-design .rightSection .infos .times {
  float: right;
}

.ticket-design .rightSection .infos .times strong {
  transform: scale(0.9);
  transform-origin: left bottom;
}

.ticket-design .rightSection .infos .places {
  border-right: 1px solid #99d298;
}

.ticket-design .rightSection .infos .places small {
  color: #97a1ad;
}

.ticket-design .rightSection .infos .box {
  padding: 10px 20px 10px;
  float: left;
}

.ticket-design .rightSection .infos .box small {
  font-size: 10px;
}

.ticket-design .mainSection {
  border-top: 2px solid #99d298;
  position: relative;
}

.ticket-design .mainSection .leftSection {
  width: 20%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-right: 2px solid #99d298;
}

.ticket-design .mainSection .leftSection .qrcode img {
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  bottom: 55%;
  left: 0;
  right: 0;
  margin: auto;
}

.ticket-design .mainSection .rightSection {
  width: 80%;
  float: right;
}

.ticket-design .mainSection .times strong {
  transform: scale(0.9);
  transform-origin: left bottom;
}

.ticket-design .mainSection .box {
  padding: 10px 20px 10px;
  float: left;
  font-size: 13px;
}

.ticket-design .mainSection .box small {
  font-size: 10px;
}

.ticket-design .strap {
  clear: both;
  position: relative;
  /*border-top: 1px solid #99d298;*/
}

.ticket-design .strap .box {
  padding: 23px 0 20px 20px;
}

.ticket-design .strap .box div {
  margin-bottom: 15px;
}

.ticket-design .strap .box div small {
  font-size: 10px;
}

.ticket-design .strap .box div strong {
  font-size: 13px;
}

.ticket-design .strap .box sup {
  font-size: 8px;
  position: relative;
  top: -5px;
}

.ticket-design .strap .eventLogo img {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 200px;
  height: 100px;
}

<div class="ticket-design">
  <header>
    <div class="logo">
      <img src="https://i.stack.imgur.com/I7wrc.png">
    </div>
  </header>
  <div class="mainSection">
    <div class="leftSection">
      <div class="qrcode">
        <img src="https://i.stack.imgur.com/Rdojb.png">
      </div>
    </div>
    <div class="rightSection">
      <div class="eventDetails">
        <div class="eventDetail">
          <small>Demo Name</small>
          <strong>Ticketing Event</strong>
        </div>
      </div>
      <div class="infos">
        <div class="places">
          <div class="box">
            <small>Date and Time</small>
            <strong>Sunday 30th July 17 (12:00pm/4:00pm)</strong>
          </div>
        </div>
        <div class="times">
          <div class="box">
            <small>Location</small>
            <strong>97-99 Pitt Street
Sydney, New South Wales
Australia, 2000</strong>
          </div>
        </div>
      </div>
      <div class="strap">
        <div class="box">
          <div class="passenger">
            <small>Ticket Type</small>
            <strong>Day 2 Ticket</strong>
          </div>
          <div class="date">
            <small>Payment Status</small>
            <strong>AUD 30</strong>
          </div>
        </div>
        <div class="eventLogo">
          <img src="https://i.stack.imgur.com/I7wrc.png">
        </div>
      </div>
    </div>
  </div>
</div>

关于html - HTML Flex替代品，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45073106/

10-12 12:30
Powered by LMLPHP ©2024 Flex替代品 0.045040