html - 图像定位和 div 高度扩展的 CSS 样式问题

Question

我不熟悉 HTML 和 CSS 样式。我需要按照客户提供的格式开具发票。我已经创建了发票，但在大多数地方我都使用了 Position = Absolute。如果我必须展示一种产品，那么它就可以正常工作。但是，如果有多个产品，产品的图像和文本开始相互重叠，并且我在其中展示产品的 div 不会展开，页脚也不会按照 div 高度展开下降。

这里是 the template that I have created

我需要帮助将产品放置在 div 中而不相互重叠(div 高度扩展)并且页脚应根据 div 的高度扩展向下移动。

截止日期临近，我真的被这个问题困住了。非常感谢您的帮助。谢谢

Answer 1

尝试这样的事情。注意:我没有合并似乎在背景中的图像。页脚还没有样式。

body {
  margin: 0;
  padding: 0.44in;
  font-style: normal;
  font-weight: 400;
  font-size: 9pt;
  font-family: Roboto;
  color: #333333;
}

.invoice-container {
  width: 8.41in;
  height: 11.14in;
  background-image: url(ci_1.png);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  justify-items: space-around;
}

.invoice-break {
  flex-basis: 100%;
}

.invoice-head {
  justify-content: center;
  line-height: 0.21in;
  flex-basis: 100%;
  display: flex;
}

.invoice-logo {
  width: 0;
  margin-left: .15in;
}

.invoice-title {
  margin: 0 auto;
  font-size: 12pt;
  font-weight: 700;
  color: #3c3c3c;
}
.invoice-title > div {
  font-size: 9pt;
  font-weight: 400;
}

.invoice-billing {
  line-height: 0.18in;
  flex-basis: 100%;
  display: flex;
  justify-items: flex-start;
  margin: .3in .15in 0;
  color: #000000;
}
.invoice-billing > * {
  flex-grow: 1;
}

.invoice-bill-to {
  font-weight: 700;
  flex-basis: 2.69in;
}

.invoice-ship-to {
  font-weight: 700;
  flex-basis: 2.69in;
}

.invoice-detail {
  flex-basis: 2.69in;
}

.invoice-order {
  flex-basis: 100%;
  box-sizing: border-box;
  margin: 0.3in 0.15in 0;
}

.invoice-order table {
  width: 100%;
}

.invoice-order th {
  /* color: #ffffff; */
  padding: 0.1in;
}
.invoice-order th.item-desc {
  text-align: left;
}
.invoice-order th.item-qty, .invoice-order th.item-price, .invoice-order th.item-total {
  text-align: right;
}

.invoice-order td {
  vertical-align: center;
  padding: 0.1in;
}
.invoice-order td.item-qty, .invoice-order td.item-price, .invoice-order td.item-total {
  text-align: right;
}

.product {
  display: flex;
}

.product-picture {
  margin-right: 0.15in;
}

.product-description {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-title {
  font-weight: 700;
}

.invoice-notes {
  margin: 0 0.15in;
  padding-top: 0.075in;
}

.invoice-notes-title {
  font-weight: 700;
}

.invoice-notes-copy {
  margin-top: 0.15in;
}

.invoice-shipping-total {
  margin-left: auto;
  flex-basis: 3in;
  margin-right: .15in;
}
.invoice-shipping-total table {
  width: 100%;
}
.invoice-shipping-total tr:last-child {
 /* color: #ffffff;*/
}
.invoice-shipping-total th {
  text-align: left;
  padding: .1in;
}
.invoice-shipping-total td {
  text-align: right;
  padding: .1in;
}

.invoice-footer {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"> 


<div class="invoice-container">
  <div class="invoice-head">
    <div class="invoice-logo"><img width="175" height="53" src="ri_1.png"></div>
    <div class="invoice-title">
      A4Tech Pakistan
      <div>
        Online Store - Pakistan<br>
        <a href="http://www.a4tech.pk" target="_blank">www.a4tech.pk</a><br>
        03 111 611 711
    </div>
    </div>
    
  </div>
  
  <div class="invoice-break"></div>
  
  <div class="invoice-billing">
    <div class="invoice-bill-to">
      Bill to<br />
      Kashif Ali<br />
      Alkhidmat Foundation Pakistan<br />
      3 km Khayaban e jinnah near Dream Villas<br />
      Society Lahore<br />
      Lahore<br />
      54000<br />
      Tel. +92 323 8479146      
    </div>
    <div class="invoice-ship-to">
      Ship to<br />
      Kashif Ali<br />
      Alkhidmat Foundation Pakistan<br />
      3 km Khayaban e jinnah near Dream Villas<br />
      Society Lahore<br />
      Lahore<br />
      54000<br />
      Tel. +92 323 8479146
    </div>
    <div class="invoice-detail">
      Invoice No. #1280<br>
      <br>
      Order Date 03 May, 2019<br>
      Payment Cash on delivery (cod)<br>
      Shipping
    </div>
  </div>

  <div class="invoice-break"></div>
  
  <div class="invoice-order">
    <table>
      <thead>
        <tr>
          <th class="item-desc">Item Description</th>
          <th class="item-qty">Qty</th>
          <th class="item-price">Price</th>
          <th class="item-total">Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="item-desc">
            <div class="product">
              <div class="product-picture"><img src="ri_1.png" width="122" height="105" /></div>
              <div class="product-description">
                <div class="product-title">H151 Stereo Headset - 1 Year Warranty</div>
                <div class="product-item-number">981-000587</div>            
              </div>
            </div>
          </td>
          <td class="item-qty">× 1</td>
          <td class="item-price">Rs.2,399.00 </td>
          <td class="item-total">Rs.2,399.00 </td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <div class="invoice-break"></div>
  
  <div class="invoice-notes">
    <div class="invoice-notes-title">Notes</div>
    <div class="invoice-notes-copy">
      THIS INVOICE AND PACKING MATERIAL IS MANDATORY FOR<br>
      WARRANTY PURPOSE.  
    </div>
    <div class="invoice-notes-serial">SERIAL # 1845ALA89609</div>
    
  </div>
  <div class="invoice-shipping-total">
    <table>
      <tr>
        <th>Subtotal</th>
        <td>Rs.2,399.00</td>
      </tr>
      <tr>
        <th>Shipping</th>
        <td>Rs.0.00</td>
      </tr>
      <tr>
        <th>Total</th>
        <td>Rs.2,399.00</td>
      </tr>
    </table>
  </div>
  
  <div class="invoice-break"></div>
  
  <div class="invoice-footer">
    <img style="width:0.23in;height:0.23in" src="ri_5.png" />
    <img style="width:0.23in;height:0.23in" src="ri_6.png" />
    <img style="width:0.23in;height:0.23in" src="ri_7.png" />
    <div class="invoice-break"></div>
    <a href="http://www.logitech.pk" target="_blank">www.logitech.pk</a>
    <div class="invoice-break"></div>
    <p>If you have any questions, please do get in contact.</p>
    <div class="invoice-break"></div>
    <a href="mailto:info@logitech.pk" target="_blank">info@logitech.pk</a>
    <div class="invoice-break"></div>
    <p>Thanks for your business!</p>
  </div>
  
  
</div>