Heim >Web-Frontend >HTML-Tutorial >html布局问题_html/css_WEB-ITnose
我在页面做出这个效果,但是用打印机打印出来的效果确实二维码在文字下面,请问各位大神这该怎么改,
页面代码如下:
<input name="b_print" type="button" class="ipt" onClick="printdiv('cardstyle');" value="打印 "><div id="div_print"><div id="cardstyle" > <div id="address" class="divbox" > <h3 style="border:none;border-bottom:black solid 1px;font-size:10px;width:150px;">Production Date: 10/30/2015 </h3> <h3 style="border:none;border-bottom:black solid 1px;font-size:10px;width:150px;">Naterial Code : 20401100000 </h3> <h3 style="border:none;border-bottom:black solid 1px;font-size:10px;width:150px;">Parts Name : Coil </h3> <h3 style="border:none;border-bottom:black solid 1px;font-size:10px;width:150px;">Model Name: KK04 </h3> <h3 style="border:none;border-bottom:black solid 1px;font-size:10px;width:150px;"> Qty : 2000Pcs </h3> <h3 style="border:none;border-bottom:black solid 1px;font-size:10px;width:150px;">Supplier Code : 123456789 </h3> <h3 style="border:none;border-bottom:black solid 1px;font-size:10px;width:150px;">Lot No : 2015-001 </h3> </div> <div id="map" > <img alt="Sample map" src="X220003200.jpg" width="120" style="max-width:90%" /> </div> </div>
position:absolute;
样式如下,具体你再修改一下:
<style>#cardstyle{position:relative;}#cardstyle .divbox{position:absolute;left:10px;}#cardstyle #map{position:absolute;left:300px;top:60px;}</style>
看着比较麻烦
position:absolute;
样式如下,具体你再修改一下:
<style>#cardstyle{position:relative;}#cardstyle .divbox{position:absolute;left:10px;}#cardstyle #map{position:absolute;left:300px;top:60px;}</style>你说的这种方法打印出来的结果也是一样的,没变化。
各位大神帮帮忙啊
打印机上的排版跟浏览器的不一样的吧,往这方面看一下吧