Javascript 基于相邻图元计算线高度

我遇到了一个棘手的Bootstrap/JavaScript/CSS问题。我希望下图中相邻缩略图中的标题占用相同的空间。默认情况下，h3标签的行高均为26px

对于文本没有换行的标题，我可以手动将其行高设置为52px，以达到预期效果

但是当我调整窗口大小时，东西又掉了出来

---

有没有办法计算4个元素的最大高度，然后在文本尚未换行的元素中适当设置行高？

Flexbox在您的场景中实际起作用。诀窍是将Thumnail本身再次定义为FlexBox。然后，您可以在h3元素上定义flex grow，以便在其他元素的flex grow=0时始终填充整个剩余空间。请参见下面的示例代码“使用整页”轻松调整项目的宽度：

主要{ 显示器：flex； } 部分{ flex:11160px； 显示器：flex； 弯曲方向：立柱； } h3{ 弹性：10自动； } /*装饰*/ 主{填充：5px；背景：ccc；}节{背景：fff；边框半径：3px；边距：5px；填充：10px；}h3{边距：020px；} OD批准 进行中 主管批准 进行中 人力资源批准 进行中 等级和收据要换行的较长文本 进行中

---

引导4 flexbox将工作。下面是一个关于卡片的例子

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

---

经过一番折腾，我终于找到了一个有效的组合。解决此问题的最大关键是设置.panel body{height:100%}

HTML:

结果:

---

你能把密码寄出去吗？你试过flexbox吗？我看flebox在这里没有帮助，因为这些盒子是按内容分组的。但是，网格布局实际上可能会起作用。@ZimSystem我目前正在使用flexbox使缩略图的高度保持一致，我是否可以设置.thumboil.h3{height:40%}使标题始终占据缩略图的相同部分？我会马上发布代码。@Christoph你能进一步解释吗？以前从未使用过网格，这有点让人困惑。代码在哪里？

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

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