Berechnen der Zeilenhöhe basierend auf benachbarten Elementen

Question

Ich bin auf ein kniffliges Bootstrap/JavaScript/CSS-Problem gestoßen. Ich möchte, dass die Header in den nebenstehenden Miniaturansichten, die unten abgebildet sind, alle den gleichen Platz einnehmen. Standardmäßig haben die h3 Tags eine Zeilenhöhe von 26px.

Für die eine Kopfzeile, deren Text nicht zu einer zweiten Zeile gewickelt wurde, kann ich die Zeilenhöhe manuell auf 52px setzen, um den gewünschten Effekt zu erzielen.

Aber wenn ich die Größe des Fensters, die Dinge fallen wieder fehl am Platz.

Gibt es eine Möglichkeit, die maximale Höhe der 4 Elemente zu berechnen, und dann die Zeilenhöhe entsprechend in dem Element (e), wo der Text noch nicht eingewickelt ist?

Answer 1

Flexbox arbeitet tatsächlich in Ihrem Szenario. Der Trick besteht darin, die Thumnails selbst wieder als Flexboxen zu definieren. Dann können Sie flex-grow auf Ihren h3 Elementen definieren, um immer den gesamten verbleibenden Platz zu füllen (während die anderen Elemente haben). Siehe das folgende Beispiel-Code (verwenden „ganze Seite“ auf einfache Weise die Breite der Elemente anpassen):

main { 
 
    display: flex; 
 
} 
 

 
section { 
 
    flex: 1 1 160px; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
h3 { 
 
    flex: 1 0 auto; 
 
} 
 

 
/*decoration*/ 
 
main {padding: 5px;background: #ccc; }section { background: #fff;border-radius: 3px; margin: 5px;padding: 10px;} h3 { margin: 0 0 20px;}

<main> 
 
    <section> 
 
    <h3> OD Approval </h3> 
 
    <div> In Progress </div> 
 
    </section> 
 
    <section> 
 
    <h3> Supervisor Approval </h3> 
 
    <div> In Progress </div> 
 
    </section> 
 
    <section> 
 
    <h3> HR Approval </h3> 
 
    <div> In Progress </div> 
 
    </section> 
 
    <section> 
 
    <h3> Grades and Receipts (longer text to wrap)</h3> 
 
    <div> In Progress </div> 
 
    </section> 
 
</main>

Diese Lösung nicht einmal Javascript benötigt.

Answer 2

Bootstrap 4 Flexbox wird funktionieren. Hier ist ein Beispiel mit Karten ..

<div class="row"> 
     <div class="col-md-3 col-sm-6"> 
      <div class="card card-block h-100 text-center"> 
       <div class="h-75 d-flex justify-content-center py-2 bg-info rounded"> 
        <h3 class="my-auto">Snippets</h3> 
       </div> 
       <h1>313</h1> 
      </div> 
     </div> 
     <div class="col-md-3 col-sm-6"> 
      <div class="card card-block h-100 text-center"> 
       <div class="h-75 d-flex justify-content-center py-2 bg-info rounded"> 
        <h3 class="my-auto">Templates and Themes</h3> 
       </div> 
       <h1>48</h1> 
      </div> 
     </div> 
     <div class="col-md-3 col-sm-6"> 
      <div class="card card-block h-100 text-center"> 
       <div class="h-75 d-flex justify-content-center py-2 bg-info rounded"> 
        <h3 class="my-auto">Example Code</h3> 
       </div> 
       <h1>982</h1> 
      </div> 
     </div> 
     <div class="col-md-3 col-sm-6"> 
      <div class="card card-block h-100 text-center"> 
       <div class="h-75 d-flex justify-content-center py-2 bg-info rounded"> 
        <h3 class="my-auto">More Downloads</h3> 
       </div> 
       <h1>412</h1> 
      </div> 
     </div> 
    </div> 

https://www.codeply.com/go/FDEt2gK20L

Answer 3

Nach einiger Hantieren konnte ich eine Kombination finden, die funktioniert. Der größte Schlüssel um das Problem zu lösen war .panel-body {height: 100%}

HTML zu setzen:

<Row id="workflow-display-hor"> 
     <Col sm={3} className="first"> 
     <Panel> 
      <h3 style={{ color: config.OD.textColor }}> 
      OD Approval 
      </h3> 
      <p style={{ color: config.OD.textColor }} className="status-p"> 
      {config.OD.status} 
      </p> 
      <p className="verify-circle"> 
      <MdCheckCircle style={{ verticalAlign: 'text-bottom', color: config.OD.color }} size={25} /> 
      </p> 
     </Panel> 
     </Col> 
     <Col sm={3}> 
     <Panel> 
      <h3 style={{ color: config.Super.textColor }}> 
      Supervisor Approval 
      </h3> 
      <p style={{ color: config.Super.textColor }} className="status-p"> 
      {config.Super.status} 
      </p> 
      <p className="verify-circle"> 
      <MdCheckCircle style={{verticalAlign: 'text-bottom', color: config.Super.color }} size={25} /> 
      </p> 
     </Panel> 
     </Col> 
     <Col sm={3}> 
     <Panel> 
      <h3 style={{ color: config.HR.textColor }}> 
      HR Approval 
      </h3> 
      <p style={{ color: config.HR.textColor }} className="status-p"> 
      {config.HR.status} 
      </p> 
      <p className="verify-circle"> 
      <MdCheckCircle style={{verticalAlign: 'text-bottom', color: config.HR.color }} size={25} /> 
      </p> 
     </Panel> 
     </Col> 
     <Col sm={3} className="last"> 
     <Panel> 
      <h3 style={{ color: config.GR.textColor }}> 
      Grades & Receipts 
      </h3> 
      <p style={{ color: config.GR.textColor }} className="status-p"> 
      {config.GR.status} 
      </p> 
      <p className="verify-circle"> 
      <MdCheckCircle style={{verticalAlign: 'text-bottom', color: config.GR.color }} size={25} /> 
      </p> 
     </Panel> 
     </Col> 
    </Row> 

CSS:

#workflow-display-hor.row { 
    display: flex; 
    align-items: stretch; 
} 

#workflow-display-hor .panel { 
    height: 95%; 
} 

#workflow-display-hor .panel > .panel-body { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
} 
#workflow-display-hor .status-p { 
    margin-bottom: 20px; 
} 
#workflow-display-hor .panel h3 { 
    flex: 1 0 auto; 
} 

Ergebnis: