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

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

这是

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

---

最后期限快到了，我真的被困在这个问题上了。我们将非常感谢你的帮助。谢谢

使用一些css框架更快更方便。下面是这样一个快速示例的示例->

.container{
字体大小：12px；
}

A4Tech巴基斯坦公司
网上商店-巴基斯坦
www.a4tech.pk
03 111 611 711

向

卡西夫阿里

巴基斯坦基基基金会
距离梦想别墅3公里的Khayaban e jinnah

拉合尔学会

拉合尔

54000

电话+923238479146
发货至

卡西夫阿里

巴基斯坦基基基金会
距离梦想别墅3公里的Khayaban e jinnah

拉合尔学会

拉合尔

54000

电话+923238479146

发票号#1280订单日期2019年5月3日

货到付款（cod）

航运
H151立体声耳机-1年保修
981-000587
x1
2399.00卢比
2399.00卢比
H151立体声耳机-1年保修
981-000587
x1
2399.00卢比
2399.00卢比
H151立体声耳机-1年保修
981-000587
x1
2399.00卢比
2399.00卢比
注释

此发票和包装材料对于

保修目的

序列号#1845ALA89609

小计
2399.00卢比
航运
卢比0.00
www.logitech.pk

如果您有任何问题，请联系我们

info@logitech.pk

谢谢你的生意

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

正文{
保证金：0；
填充：0.44英寸；
字体风格：普通；
字体大小：400；
字号：9pt；
字体系列：Roboto；
颜色：#333333；
}
.发票箱{
宽度：8.41in；
高度：11.14英寸；
背景图片：url（ci_1.png）；
显示器：flex；
柔性包装：包装；
调整项目：灵活启动；
调整内容：灵活启动；
调整内容：灵活启动；
证明项目：周围的空间；
}
.发票中断{
弹性基准：100%；
}
.发票抬头{
证明内容：中心；
线高：0.21in；
弹性基准：100%；
显示器：flex；
}
.发票标识{
宽度：0；
左边距：.15英寸；
}
.发票名称{
保证金：0自动；
字号：12号；
字号：700；
颜色：#3C；
}
.发票标题>部门{
字号：9pt；
字体大小：400；
}
.发票账单{
线高：0.18英寸；
弹性基准：100%；
显示器：flex；
调整项目：弹性启动；
边距：3英寸15英寸0；
颜色：#000000；
}
.发票开票>*{
柔性生长：1；
}
.向……开具发票{
字号：700；
弹性基础：2.69英寸；
}
.发票寄送至{
字号：700；
弹性基础：2.69英寸；
}
.发票明细{
弹性基础：2.69英寸；
}
.发票订单{
弹性基准：100%；
框大小：边框框；
边距：0.3英寸0.15英寸0；
}
.发票订单表{
宽度：100%；
}
.发票订单号{
/*颜色：#ffffff*/
填充：0.1in；
}
.发票订单th.item-desc{
文本对齐：左对齐；
}
.发票订单第项-数量、.发票订单第项-价格、.发票订单第项-总计{
文本对齐：右对齐；
}
.发票订单td{
垂直对齐：居中；
填充：0.1in；
}
.发票订单td.item-qty、.发票订单td.item-price、.发票订单td.item-total{
文本对齐：右对齐；
}
.产品{
显示器：flex；
}
.产品图片{
右边距：0.15英寸；
}
.产品说明{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
.产品名称{
字号：700；
}
.发票附注{
边缘：0.15英寸；
衬垫顶部：0.075in；
}
.发票附注标题{
字号：700；
}
.发票备注副本{
边缘顶部：0.15英寸；
}
.发票装运总额{
左边距：自动；
弹性基础：3英寸；
右边距：.15英寸；
}
.发票发货总额表{
宽度：100%；
}
.发票发货总额tr：最后一个子项{
/*颜色：#ffffff*/
}
.发票装运总额{
文本对齐：左对齐；
填充：.1in；
}
.发票装运总运费{
文本对齐：右对齐；
填充：.1in；
}
.发票页脚{
弹性基准：100%；
显示器：flex；
证明内容：中心；
柔性包装：包装；
}

A4Tech巴基斯坦公司
网上商店-巴基斯坦



03 111 611 711
账单到

卡西夫阿里

巴基斯坦基基基金会
距离梦想别墅3公里的Khayaban e jinnah

拉合尔学会

拉合尔

54000

电话+923238479146
发货至

卡西夫阿里

巴基斯坦基基基金会
卡亚巴3公里