<style>
.content{
width:96mm;
/* height:109mm; */
border:0px solid blue;
margin-left: 2mm;
margin-bottom: 2mm;
margin-top: 2mm;
}
.bar{
float: left;
/* border-left:1px solid gray;
border-right:1px solid gray;
*/
width: 96mm;
overflow: hidden;
/* position:relative;
vertical-align: top;
display:inline-block; */
/* word-break:break-all; */
/* */
}
</style>
<div id="textareaView">
<div id="printDiv" style="width:100mm;border:0px solid #F00;overflow: hidden;"><!-- height:113mm -->
<div class="content">
<div class="bar" style="height: 20mm;border-top:1px solid gray;border-left: 1px solid gray;border-right: 1px solid gray;">1</div>
<div class="bar" style="height: 12mm;border-top:1px solid gray;border-left: 1px solid gray;border-right: 1px solid gray;margin: 0;padding: 0;">
<div style="float: left;height:100%;width:48mm;border-right: 1px solid gray;">
2-1
</div>
<div style="height:100%;overflow:hidden;">
2-2
</div>
</div>
<div class="bar" style="height: 6mm;border:1px solid gray;margin: 0;padding: 0; ">
<div style="float: left;height:100%;width:48mm;border-right: 1px solid gray;">
<div style="float: left;height:100%;width: 7mm;border-right: 1px solid gray;">
3-1
</div>
<div style="height:100%;overflow:hidden;">
3-2
</div>
</div>
<div style="height:100%;overflow:hidden;">
<div style="float: left;height:100%;width: 10mm;border-right: 1px solid gray;">
3-3
</div>
<div style="height:100%;overflow:hidden;">
3-4
</div>
</div>
</div>
<div class="bar" style="height: 16mm;border-bottom:1px solid gray;border-left:1px solid gray;border-right:1px solid gray;margin: 0;padding: 0; ">
<div style="float: left;height:100%;width: 7mm;border-right: 1px solid gray;">
4-1
</div>
<div style="float: left;height:100%;width: 51mm;border-right: 1px solid gray;">
4-2
</div>
<div style="height:100%;overflow:hidden;">
<div style="height: 50%;width: 100%;border-bottom: 1px solid gray;">
<div style="float: left;height:100%;width: 10mm;border-right: 1px solid gray;">4-3-1</div>
<div style="height:100%;overflow:hidden;">5-3-2</div>
</div>
<div style="height: 50%;width: 100%;">
<div style="float: left;height:100%;width: 10mm;border-right: 1px solid gray;">4-3-3</di
DIV+CSS绘制JD电子面单初稿
最新推荐文章于 2021-09-28 13:39:19 发布
本文展示了如何利用DIV+CSS技术绘制京东电子面单的初稿。首先明确了需求,拆分出多个DIV进行布局,从整体到细节逐步构建。通过调试调整各个DIV的宽高,并填充面单内容及设定字体样式。最后,利用lodop添加了条形码,完成设计。
摘要由CSDN通过智能技术生成