html - 图像定位和 div 高度扩展的 CSS 样式问题
问题描述
我是 HTML 和 CSS 样式的新手。我需要根据客户提供的格式开发发票。我已经创建了发票,但在大多数地方我都使用了 Position = Absolute。如果我必须展示一种产品,那么它可以正常工作。但是,如果有多个产品,产品的图像和文本开始相互重叠,并且我展示产品的 div 不会扩展,页脚也不会根据 div 高度扩展而下降。
这是我创建的模板
我需要帮助将产品放置在 div 中而不相互重叠(div 高度扩展),并且页脚应根据 div 的高度扩展向下移动。
截止日期快到了,我真的被这个问题困住了。您的帮助将不胜感激。谢谢
解决方案
尝试这样的事情。注意:我没有合并似乎在背景中的图像。并且页脚尚未设置样式。
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>
推荐阅读
- android - 手机处于睡眠模式时,Socket.Io 客户端断开连接
- swift - 如何一次从多个位置删除一个密钥 firebase 数据库?
- .net - 错误 MSB4057:项目中不存在目标“Build”
- java - 为什么'BackgroundFetchHeadlessTask.java'在离子中不起作用?
- android - 更新到android gradle plugin 3.5后的proguard问题
- react-native - 在本机基础选项卡上迭代会返回 Invariant Violation
- api - 使用 setvalue 的 Google 表格不会触发 API 端点的刷新
- php - 如何通过数据库中的 PHP 获取其中的完整 url 类别和产品列表?
- azure-cognitive-search - 在文档上使用 Collection(Edm.GeographyPoint) 时如何按距离排序文档
- visual-studio - Xamarin for IOS 的构建错误 - 找不到 Java.Interop