Html 在表格单元格中使用css 100%设置内部div高度

我有一个表格/表格行/表格单元格布局，我希望内部div高度对齐。 我看到了这篇文章：它问了同样的问题，但我的代码似乎不能得到同样的结果

我有一个JS解决方案，但我真的希望不需要它

我的问题是：如何仅使用css使nkda框与其他两个框的高度相同

这是一把js小提琴

html

<div class="forum-tag-summaries">

  <dl class="tags-rows">
    <div class="row tags-row">
      <div id="tag-wrapper-2" class="tag-wrapper" data-row="0" data-ftg_id="2" data-i="0">
        <div class="alert alert-info" id="ui-id-1">
          <dt>
            <div class="fl" title="Created 1 year ago by Mr Peter GEE">
              clinical
            </div>
            <button class="btn btn-xs btn-edit ml-5">
              <span class="fa fa-pencil">
              </span>
            </button>
            <div class="fr text-muted">
              x&nbsp;2
            </div>
          </dt>
          <br>
          <dd>
            <div class="text-muted view" title="">
              Clinical questions relating to medication reviews.
            </div>
            <div class="edit hidden text-muted">
              <textarea data-id="2" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
                Clinical questions relating to medication reviews.
              </textarea>
            </div>
          </dd>
      </div>
  </div>
  <div id="tag-wrapper-6" class="tag-wrapper active" data-row="0" data-ftg_id="6" data-i="1">
    <div class="alert alert-info" id="ui-id-2">
      <dt>
        <div class="fl" title="Created 2 days ago by Mr Peter GEE">
          nkda
        </div>
        <button class="btn btn-xs btn-edit ml-5">
          <span class="fa fa-pencil">
          </span>
        </button>
        <div class="fr text-muted">
          x&nbsp;1
        </div>
      </dt>
      <br>
      <dd>
        <div class="text-muted view" title="">
          no known drug allergies
        </div>
        <div class="edit hidden text-muted">
          <textarea data-id="6" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
            no known drug allergies
          </textarea>
        </div>
      </dd>
    </div>
  </div>
  <div id="tag-wrapper-3" class="tag-wrapper" data-row="0" data-ftg_id="3" data-i="2">
    <div class="alert alert-warning" id="ui-id-3">
      <dt>
        <div class="fl" title="Created 2 days ago by Mr user 1">
          RMMR
        </div>
        <button class="btn btn-xs btn-edit ml-5">
          <span class="fa fa-pencil">
          </span>
        </button>
        <div class="fr text-muted">
          x&nbsp;1
        </div>
      </dt>
      <br>
      <dd>
        <div class="text-muted view" title="">
          <span class="text-danger">
            This tag does not have a description, please enter one!
          </span>
        </div>
        <div class="edit hidden text-muted">
          <textarea data-id="3" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
          </textarea>
        </div>
      </dd>
    </div>
  </div>
  </div>
  <div class="row tags-row">
    <div id="tag-wrapper-4" class="tag-wrapper" data-row="1" data-ftg_id="4" data-i="0">
      <div class="alert alert-warning" id="ui-id-4">
        <dt>
          <div class="fl" title="Created 2 days ago by Mr user 1">
            hypertension
          </div>
          <button class="btn btn-xs btn-edit ml-5">
            <span class="fa fa-pencil">
            </span>
          </button>
          <div class="fr text-muted">
            x&nbsp;1
          </div>
        </dt>
        <br>
        <dd>
          <div class="text-muted view" title="">
            <span class="text-danger">
              This tag does not have a description, please enter one!
            </span>
          </div>
          <div class="edit hidden text-muted">
            <textarea data-id="4" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
            </textarea>
          </div>
        </dd>
      </div>
  </div>
  <div id="tag-wrapper-5" class="tag-wrapper" data-row="1" data-ftg_id="5" data-i="1">
    <div class="alert alert-warning" id="ui-id-5">
      <dt>
        <div class="fl" title="Created 2 days ago by Mr user 1">
          poly pharmacy
        </div>
        <button class="btn btn-xs btn-edit ml-5">
          <span class="fa fa-pencil">
          </span>
        </button>
        <div class="fr text-muted">
          x&nbsp;1
        </div>
      </dt>
      <br>
      <dd>
        <div class="text-muted view" title="">
          <span class="text-danger">
            This tag does not have a description, please enter one!
          </span>
        </div>
        <div class="edit hidden text-muted">
          <textarea data-id="5" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
          </textarea>
        </div>
      </dd>
    </div>
  </div>
  <div id="tag-wrapper-7" class="tag-wrapper" data-row="1" data-ftg_id="7" data-i="2">
    <div class="alert alert-danger" id="ui-id-6">
      <dt>
        <div class="fl" title="Created 23 hours ago by user 1">
          test
        </div>
        <button class="btn btn-xs btn-edit ml-5">
          <span class="fa fa-pencil">
          </span>
        </button>
        <div class="fr text-muted">
          x&nbsp;0
        </div>
      </dt>
      <br>
      <dd>
        <div class="text-muted view" title="">
          <span class="text-danger">
            This tag does not have a description, please enter one!
          </span>
        </div>
        <div class="edit hidden text-muted">
          <textarea data-id="7" name="ftg_description" class="mw maxlength-enabled ajax" maxlength="1000" placeholder="Enter a description for this tag…">
          </textarea>
        </div>
      </dd>
    </div>
  </div>
  </div>
  </dl>
</div>

示例屏幕截图

---

使用CSS唯一能做的就是：

为三个

制作一个容器

将高度设置为最大的

高度

将容器的位置设置为“相对”

将

的高度设置为100%

---

我希望这有帮助

这很简单。在您的情况下，这就是您所需要的：

dl.tags-rows {
    display: table;
    height: 1px; /* IE fix, any small height */
}

.alert {
    display: inline-table;
    height: 100%;
    width: 100%;
    vertical-align: top;
}

---

演示：

非常感谢，在我的测试中，我所需要的只是。警报{display:inline table}我有REST浏览器支持什么？IE9和IE10似乎都失败了。

dl.tags-rows {
    display: table;
    height: 1px; /* IE fix, any small height */
}

.alert {
    display: inline-table;
    height: 100%;
    width: 100%;
    vertical-align: top;
}