DIV+CSS绘制JD电子面单初稿

<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</div>
					  	<div  style="height:100%;overflow:hidden;">5-3-4</div>
					  </div>
					</