Unnötiger linker Rand kommt auf Druckfenster für HTML-Inhalt

Question

Ich erzeuge eine Coupon-Typ-Anzeige von HTML und CSS, ohne das reale Bild auf dem Server zu erstellen und zu speichern, um Platz zu sparen.

Plan ist, es anzuzeigen und es auszudrucken, wenn Benutzer drucken möchte. Ich habe es geschaffen, das Layout von HTML und CSS zu erstellen und es zeigt, wie folgt

Aber wenn der Druck nun Schaltfläche geklickt wird es so viel leerer Raum auf der linken Seite erstellt ist, sehen Sie bitte das Bild unten,

ich nicht herausfinden kann, was das Problem hier sein könnte, ich füge den HTML und CSS unten.

HTML

<div class="print-coupon-text"> 
    <div class="pct-heading"> 
     <img src="***image-source***" alt="Created by JAiCOUPONS" /> 
    </div> 
    <div class="pct-col pct-col-1"> 
     <div class="pct-store-logo"> 
      <img src="***image-source***" alt="Coupon Store" /> 
     </div> 
     <div class="pct-store-desc"> 
      <span>http://abcdexample.com</span> 
      <span>#2333, 1st Comfort Road</span> 
      <span>Redint TF 78999</span> 
      <span>210 Price Fork Road</span> 
      <span>Redint TF 78999</span> 
      <span>(333) 323-4444</span> 
     </div> 
    </div> 
    <div class="pct-col pct-col-2"> 
     <span class="pct-offer-1">$50</span> 
     <span class="pct-offer-2">Off</span> 
     <span class="pct-offer-3"> Free Icecream </span> 
    </div> 
    <div class="pct-col pct-col-3"> 
     <span class="pct-title">Buy 1 Dinner</span> 
     <span class="pct-title pct-title-end">And get the 2nd one Free</span> 
     <span class="pct-desc">Dine In, Carryout Only</span> 
     <span class="pct-desc">Excludes buffet with this coupon</span> 
     <span class="pct-desc">Not Valid with other Offers</span> 
     <span class="pct-desc">Expires : 15th Jan</span> 
    </div> 
    <div class="pct-footer"> 
     <span class="pct-footer-1">Contact JAiCOUPONS @ (972) 301-7898</span> 
     <span class="pct-footer-2">Coupon ID **** | ©JAiCOUPONS.com</span> 
    </div> 
</div> 

CSS

.print-coupon-text { 
    position: relative; 
    width: 100%; 
    float: left; 
    margin-bottom: 10px; 
    padding: 10px; 
    border: 1px dashed #000; 
    border-radius: 10px; 
    font-size: 10px; 
    text-align: left; 
} 
.pct-col { 
    width: 30%; 
    float: left; 
    margin: 0 8px; 
} 
.pct-store-desc span, .pct-footer span, .pct-desc { 
    display: block; 
} 
.pct-col.pct-col-2 { 
    padding-left: 5px; 
    padding-top: 85px; 
} 
.pct-col.pct-col-3 { 
    padding-top: 40px; 
} 
.pct-offer-1 { 
    font-size: 60px; 
    font-weight: bold; 
} 
.pct-offer-2 { 
    font-weight: bold; 
} 
.pct-offer-3 { 
    display: block; 
} 
.pct-title { 
    display: block; 
    font-size: 13px; 
} 
.pct-title-end { 
    border-bottom: 1px dotted; 
    padding-bottom: 5px; 
} 
.pct-store-logo img { 
    width: 150px; 
    height: 85px; 
} 
.pct-heading { 
    position: absolute; 
    top: 0px; 
    left: 28%; 
} 
.pct-heading img { 
    width: 90%; 
} 
.pct-footer-1 { 
    position: absolute; 
    bottom: 16px; 
    right: 6px; 
} 
.pct-footer-2 { 
    position: absolute; 
    bottom: 0px; 
    right: 6px; 
} 

@media print { 
    body * { 
     visibility: hidden; 
    } 
    .print-coupon-text, .print-coupon-text * { 
     visibility: visible; 
    } 
    .print-coupon-text { 
     position: absolute; 
     left: 0; 
     top: 0; 
    } 
} 

Jede Hilfe ist willkommen.

UPDATE

Anfangsanzeige auf dem Pop-up kommt.

Answer 1

Ich denke, Sie sollten feste Breite zu Ihrem div.print-Coupon-Text

.print-coupon-text{ 
    width: 700px; // or greater/less 
} 

Answer 2

Hallo versuchen geben Sie den Coupon in einer eigenen Seite angezeigt wird, werden Sie nicht haben, um dieses Problem in diesem Fall. Schau dir Screenshots an.

BTW, ich konnte Ihr Problem nicht replizieren, funktioniert gut für mich mit Ihrem Code.

EDIT :: Auch mit Bootstrap Popup versucht, funktioniert gut.

.print-coupon-text { 
 
      position: relative; 
 
      width: 100%; 
 
      float: left; 
 
      margin-bottom: 10px; 
 
      padding: 10px; 
 
      border: 1px dashed #000; 
 
      border-radius: 10px; 
 
      font-size: 10px; 
 
      text-align: left; 
 
     } 
 

 
     .pct-col { 
 
      width: 30%; 
 
      float: left; 
 
      margin: 0 8px; 
 
     } 
 

 
     .pct-store-desc span, 
 
     .pct-footer span, 
 
     .pct-desc { 
 
      display: block; 
 
     } 
 

 
     .pct-col.pct-col-2 { 
 
      padding-left: 5px; 
 
      padding-top: 85px; 
 
     } 
 

 
     .pct-col.pct-col-3 { 
 
      padding-top: 40px; 
 
     } 
 

 
     .pct-offer-1 { 
 
      font-size: 60px; 
 
      font-weight: bold; 
 
     } 
 

 
     .pct-offer-2 { 
 
      font-weight: bold; 
 
     } 
 

 
     .pct-offer-3 { 
 
      display: block; 
 
     } 
 

 
     .pct-title { 
 
      display: block; 
 
      font-size: 13px; 
 
     } 
 

 
     .pct-title-end { 
 
      border-bottom: 1px dotted; 
 
      padding-bottom: 5px; 
 
     } 
 

 
     .pct-store-logo img { 
 
      width: 150px; 
 
      height: 85px; 
 
     } 
 

 
     .pct-heading { 
 
      position: absolute; 
 
      top: 0px; 
 
      left: 28%; 
 
     } 
 

 
     .pct-heading img { 
 
      width: 90%; 
 
     } 
 

 
     .pct-footer-1 { 
 
      position: absolute; 
 
      bottom: 16px; 
 
      right: 6px; 
 
     } 
 

 
     .pct-footer-2 { 
 
      position: absolute; 
 
      bottom: 0px; 
 
      right: 6px; 
 
     } 
 

 
     @media print { 
 
      body * { 
 
       visibility: hidden; 
 
      } 
 
      .print-coupon-text, 
 
      .print-coupon-text * { 
 
       visibility: visible; 
 
      } 
 
      .print-coupon-text { 
 
       position: absolute; 
 
       left: 0; 
 
       top: 0; 
 
      } 
 
     }

<html lang="en"> 
 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
     <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Popup</button> 
 

 
     <!-- Modal --> 
 
     <div class="modal fade" id="myModal" role="dialog"> 
 
      <div class="modal-dialog"> 
 

 
       <!-- Modal content--> 
 
       <div class="modal-content"> 
 
        <div class="modal-body"> 
 

 
         <div class="print-coupon-text"> 
 
          <div class="pct-heading"> 
 
           <img src="***image-source***" alt="Created by JAiCOUPONS" /> 
 
          </div> 
 
          <div class="pct-col pct-col-1"> 
 
           <div class="pct-store-logo"> 
 
            <img src="***image-source***" alt="Coupon Store" /> 
 
           </div> 
 
           <div class="pct-store-desc"> 
 
            <span>http://abcdexample.com</span> 
 
            <span>#2333, 1st Comfort Road</span> 
 
            <span>Redint TF 78999</span> 
 
            <span>210 Price Fork Road</span> 
 
            <span>Redint TF 78999</span> 
 
            <span>(333) 323-4444</span> 
 
           </div> 
 
          </div> 
 
          <div class="pct-col pct-col-2"> 
 
           <span class="pct-offer-1">$50</span> 
 
           <span class="pct-offer-2">Off</span> 
 
           <span class="pct-offer-3"> Free Icecream </span> 
 
          </div> 
 
          <div class="pct-col pct-col-3"> 
 
           <span class="pct-title">Buy 1 Dinner</span> 
 
           <span class="pct-title pct-title-end">And get the 2nd one Free</span> 
 
           <span class="pct-desc">Dine In, Carryout Only</span> 
 
           <span class="pct-desc">Excludes buffet with this coupon</span> 
 
           <span class="pct-desc">Not Valid with other Offers</span> 
 
           <span class="pct-desc">Expires : 15th Jan</span> 
 
          </div> 
 
          <div class="pct-footer"> 
 
           <span class="pct-footer-1">Contact JAiCOUPONS @ (972) 301-7898</span> 
 
           <span class="pct-footer-2">Coupon ID **** | ©JAiCOUPONS.com</span> 
 
          </div> 
 
         </div> 
 

 
        </div> 
 
        <div class="modal-footer"> 
 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>