HTMLコンテンツの印刷ウィンドウに不要な左余白が表示される

Question

スペースを節約するために、実際のイメージを作成して保存することなく、htmlとcssでクーポンタイプの表示を生成します。

印刷したいときに表示して印刷することを計画しています。私は、HTMLとCSSでレイアウトを作成するために管理していると次のように表示され

しかしNow]ボタンをクリックすると印刷が左側に向けて作成されたので、多くの空白がある場合、画像を参照してください。以下、

私はここでの問題が何であるかを把握することはできません、私はHTMLとCSS下記を添付しています。

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; 
    } 
} 

すべてのヘルプは高く評価されます。

UPDATE

初期表示がポップアップに来ています。

Answer 1

私はこんにちは、自身のページでクーポンを表示してみてください、あなたのdiv.printクーポンテキスト

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

Answer 2

に固定幅を与えるべきだと思う、あなたはその場合には、この問題を持っていません。以下のスクリーンショットを確認してください。

あなたのコードで私の問題を再現することができませんでした。

EDIT ::ブートストラップポップアップを使用しても、正常に動作します。

.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>