隣接する要素に基づいて行の高さを計算する

Question

私はトリッキーなブートストラップ/ JavaScript/CSS問題に遭遇しました。隣り合うサムネイルのヘッダーは、すべて同じ量のスペースを占めるようにしたいと思います。デフォルトでは、h3タグの行の高さはすべて26pxです。

テキストが2行目に折り返されていない1つのヘッダーの場合、目的の効果を得るために行の高さを52pxに手動で設定できます。

しかし、私は、ウィンドウのサイズを変更すると、物事は再び場所から落ちます。

4つの要素の最大高さを計算し、テキストがまだ包まれていない要素（複数可）に適切に行の高さを設定する方法はありますか？

Answer 1

実際にはFlexboxがあなたのシナリオで動作しています。その秘訣は、thumnails自体をflexboxとして再度定義することです。次に、h3要素にflex-growを定義して残りの領域全体を常に満たすようにします（他の要素はflex-grow=0です）。 （簡単にアイテムの幅を調整するために、「全ページ」を使用）次のコード例を参照してください。

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>

このソリューションはさらに任意のJavaScriptを必要としません。

Answer 2

ブートストラップ4フレックスボックスが動作します。ここで周りいじるいくつかの後

<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

...カードを搭載した例ですが、私は作品の組み合わせを見つけることができました。この問題を解決するための最大の鍵は、設定した.panel-body {height: 100%}

HTML：

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

結果：