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

时间：2019-07-10 12:44:21

标签： html css

我是HTML和CSS样式的新手。我需要根据客户提供的格式来开发发票。我已经创建了发票，但是在大多数地方，我都使用了Position = Absolute。如果我必须展示一种产品，那么效果很好。但是，如果有多个产品，则产品的图像和文本开始相互重叠，并且我要显示产品的div不会根据div高度扩展而扩展，页脚也不会下降。

这里是the template that I have created

我需要帮助将产品放置在div中而不彼此重叠（div高度扩展），并且页脚应根据div的高度扩展向下移动。

截止日期临近，我真的在这个问题上陷于困境。非常感谢您的帮助。谢谢

2 个答案:

答案 0 :(得分：0)

尝试类似这样的方法。注意：我没有合并似乎在背景中的图像。而且页脚尚未设置样式。

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>

答案 1 :(得分：-1)

使用某些css框架更快，更方便。以下是这种快速示例的示例-> look bootstrap documentation 

.container {
      font-size: 12px;
    }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container mt-5">
    <div class="row">
      <div class="col-4"><img src="https://fakeimg.pl/250x100/"></div>
      <div class="col-8">
        <ul class="list-unstyled">
          <li><strong>A4Tech Pakistan</strong></li>
          <li>Online Store - Pakistan</li>
          <li>www.a4tech.pk</li>
          <li>03 111 611 711</li>
        </ul>
      </div>
    </div>
    <div class="row my-5">
      <div class="col-4">
        <b>
          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
        </b>
      </div>
      <div class="col-4">
        <b>
          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<br>
        </b>
      </div>
      <div class="col-4">
        <b>Invoice No. #1280 Order Date 03 May, 2019 </b><br>
        Payment Cash on delivery (cod) <br>
        Shipping
      </div>
    </div>
    <div class="row mb-3">
      <div class="col-2"><img src="https://fakeimg.pl/130/"></div>
      <div class="col-5">H151 Stereo Headset - 1 Year Warranty <br>981-000587</div>
      <div class="col-1">x1</div>
      <div class="col-2">Rs.2,399.00</div>
      <div class="col-2">Rs.2,399.00</div>
    </div>
    <div class="row mb-3">
      <div class="col-2"><img src="https://fakeimg.pl/130/"></div>
      <div class="col-5">H151 Stereo Headset - 1 Year Warranty <br>981-000587</div>
      <div class="col-1">x1</div>
      <div class="col-2">Rs.2,399.00</div>
      <div class="col-2">Rs.2,399.00</div>
    </div>
    <div class="row mb-3">
      <div class="col-2"><img src="https://fakeimg.pl/130/"></div>
      <div class="col-5">H151 Stereo Headset - 1 Year Warranty <br>981-000587</div>
      <div class="col-1">x1</div>
      <div class="col-2">Rs.2,399.00</div>
      <div class="col-2">Rs.2,399.00</div>
    </div>
    <div class="row notes">
      <div class="col-7">
        <p><b>Notes</b></p>
        <p>THIS INVOICE AND PACKING MATERIAL IS MANDATORY FOR <br>
          WARRANTY PURPOSE. <br>
          SERIAL # 1845ALA89609 </p>
      </div>
      <div class="col-5">
        <div class="row">
          <div class="col-5">Subtotal</div>
          <div class="col-5 text-right">Rs.2,399.00</div>
        </div>
        <div class="row">
          <div class="col-5">Shipping</div>
          <div class="col-5 text-right">Rs.0.00</div>
        </div>
      </div>
    </div>
    <div class="row justify-content-md-center my-5">
      <div class="col-6">
        <div class="row justify-content-md-center">
          <div class="col-2"><img src="https://fakeimg.pl/50/"></div>
          <div class="col-2"><img src="https://fakeimg.pl/50/"></div>
          <div class="col-2"><img src="https://fakeimg.pl/50/"></div>
        </div>
      </div>
    </div>
    <div class="row justify-content-md-center info text-center">
      <p>www.logitech.pk<br>
        If you have any questions, please do get in contact. <br>
        info@logitech.pk <br>
        <b>Thanks for your business!</b><br>
      </p>
    </div>
  </div>

相关问题
最新问题