Wie Blöcke blockieren, so dass sie abgeschnitten

Ich habe nur Roh-HTML und CSS verfügbar. Kein zusätzlicher Rahmen funktioniert, aber das sollte ausreichen.Wie Blöcke blockieren, so dass sie abgeschnitten

Gedruckte Rechnungen müssen Rücksende- und Empfängeradressen enthalten, die in den Fenstern mit dem übersichtlichen Umschlag angezeigt werden. Was ich im Allgemeinen habe, wenn gedruckt. Wenn der Benutzer den Browser jedoch verkleinert, fließen die rechten Blöcke unter die linken Blöcke. Was ich will, ist das zu kürzen. Ja, ich weiß, was ich habe ist im Allgemeinen der gewünschte Effekt. Aber die Benutzer nehmen an, dass die Seitenelemente jetzt anders angezeigt werden, weil sie so gedruckt werden. Ich bin es leid zu erklären, dass gedruckt und gesehen anders sind.

Ich habe versucht Lose von verschiedenen Geigen zum Thema, aber keiner scheint für mich zu arbeiten. Anscheinend verstehe ich CSS nicht gut genug. Ich benötige grundsätzlich 4 Anzeigebereiche, die an festen Positionen in einem 2x2 Raster drucken. Die Anzahl der Zeilen in jedem kann variieren **. Die Rechte-Elemente sollten abgeschnitten werden, wenn die Breite es so machen würde, dass sie nicht angezeigt werden.

Die Elemente auf der linken Seite müssen bestimmte Punkte auf der gedruckten Seite treffen, damit die Rückgabe- und Empfängeradressen in den Umhüllungsfenstern sichtbar sind. Und ja, [PracticeName] wird zweimal angezeigt.

** Bonuspunkte! Da ich die HTML-Generierung kontrolliere, kann ich den Text steuern, und da ich weiß, wie viele Zeichen und Zeilen den Abstand wegwerfen, trenne ich den Text einfach wie erforderlich. Wenn es jedoch einen Weg gibt, um sicherzustellen, dass jeder Block das für mich tun kann, wäre ich sehr dankbar.

<html> 
    <head> 
    <style> 
@page 
{ 
    size:auto;margin:0; 
} 
footer 
{ 
    page-break-before:always; 
} 
.EnvelopHeader 
{ 
    padding-top:12pt; 
} 
.Address 
{ 
    font:12Pt Arial; 
    margin-top:48pt; 
    margin-left:72pt; 
    height:4em; 
} 
.left 
{ 
    width:3.5in; 
    float:left; 
} 
.right 
{ 

} 
    </style> 
    </head> 
    <body> 
    <div class="EnvelopHeader"> 
    <div class="Address"> 
     <div class="left"> 
     <div>[PracticeName]</div> 
     <div>[PracticeAddress1]</div> 
     <div>[PracticeAddress2]</div> 
     <div>[PracticeCityStateZip]</div> 
     </div> 
     <div class="right"> 
     <div>[PracticeName]</div> 
     <div>[PracticePhoneNumber]</div> 
     </div> 
    </div> 
    <div class="Address"> 
     <div class="left"> 
     <div>[PatientName]</div> 
     <div>[PatientAddress1]</div> 
     <div>[PatientAddress2]</div> 
     <div>[PatientCityStateZip]</div> 
     </div> 
     <div class="right"> 
     <div>[PaymentReceipt]</div> 
     <div>[PaymentDate]</div> 
     <div>[PaymentType] #[ReferenceNumber]</div> 
     <div>[PaymentAmount]</div> 
     </div> 
    </div> 
    </div> 
    </body> 
</html>

Quelle

2017-05-19 Display name

Versuchen als Tabelle mit CSS nur zu formatieren

<html> 
    <head> 
     <style> 
      @page { 
       size:auto;margin:0; 
      } 
      .EnvelopHeader { 
       padding-top:12pt; 
      } 
      .Address { 
       font:12Pt Arial; 
       margin-top:48pt; 
       margin-left:72pt; 
       height:4em; 
      } 

      .table { 
       display: table; 
       border-collapse: collapse; 
      } 
      .tr { 
       display: table-row; 
      } 
      .td { 
       display: table-cell; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="EnvelopHeader table"> 
      <div class="tr"> 
       <div class="Address td"> 
        <div>[PracticeName]</div> 
        <div>[PracticeAddress1]</div> 
        <div>[PracticeAddress2]</div> 
        <div>[PracticeCityStateZip]</div> 
       </div> 
       <div class="Address td"> 
        <div>[PracticeName]</div> 
        <div>[PracticePhoneNumber]</div> 
       </div> 
      </div> 
      <div class="tr"> 
       <div class="Address td"> 
        <div>[PatientName]</div> 
        <div>[PatientAddress1]</div> 
        <div>[PatientAddress2]</div> 
        <div>[PatientCityStateZip]</div> 
       </div> 
       <div class="Address td"> 
        <div>[PaymentReceipt]</div> 
        <div>[PaymentDate]</div> 
        <div>[PaymentType] #[ReferenceNumber]</div> 
        <div>[PaymentAmount]</div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

Quelle

2017-05-19 19:55:04

, dass es von Verpackung hält. Nett, aber ich verliere die Ränder. –

Fügen Sie dann die Ränder hinzu oder setzen Sie Höhe und Breite in '.td'. –

Es funktioniert besser, wenn der "Grenz-Kollaps: Kollaps;" wird entfernt, und die Werte ".Address" "margin-XXX" werden durch "padding-XXX" ersetzt. Mit diesen Änderungen funktioniert es perfekt. Vielen Dank. –

Wie Blöcke blockieren, so dass sie abgeschnitten

Antwort

Verwandte Themen