我真的可以不使用 table 标记来让两个元素具有相同的高度吗？

Question

好的，所以我知道使用 table 进行布局非常不合时宜。但是我需要做一个有两个并排元素的布局，一个具有通常的高度，如果它有更高的内容可以增加，另一个包含一个图像。如果第一个长高，我希望有图像的那个长得与它的高度相匹配。

这是我可以用旧 table 轻松实现的东西。我怎样才能用 div 做到这一点？

这是我正在尝试做的事情：

.body {
  width: 748px;
  margin: 20px auto;
}
.breaker {
  margin: 20px 0;
  outline: 1px solid purple;
}
.poll {
  background: pink;
  width: 248px;
  height: 250px;
}
div.poll {
  float: left;
}
.story {
  float: right;
  width: 500px;
  background-size: cover;
}

<div class="body">

  <table class="breaker">
    <tr>
      <!-- This will have a variable height depending on content -->
      <td class="poll"></td>
      <!-- The height of this should match the height of .poll -->
      <td style="width:500px;background-image:url(http://lorempixel.com/output/animals-q-c-600-200-1.jpg);background-size:cover;">
      </td>
    </tr>
  </table>

  <div class="breaker">
    <!-- This will have a variable height depending on content -->
    <div class="poll"></div>
    <!-- The height of this should match the height of .poll -->
    <div class="story" style="background-image:url(http://lorempixel.com/output/animals-q-c-600-200-1.jpg)">
    </div>
  </div>

</div>

Answer 1

对两者应用 display: table-cell 并删除 float。

div.poll {
    display: table-cell;
    /* other styles */
}

.story {
    display:table-cell;
    /* other styles */
}

Working Fiddle

Answer 2

这是一个 jQuery 的回答，但我实际上是昨天写的，所以我知道它有效：

function setToTargetHeight(obj1, obj2){

    var targetHeight = $(obj1).innerHeight();

    $(obj2).css('height', targetHeight);

}

所以在使用中是这样的：

setToTargetHeight('#theTextDiv','#theImageDiv');

这个函数的命名很尴尬，所以如果有人对如何命名这个函数有任何建议，我们将不胜感激。

我真的可以不使用 table 标记来让两个元素具有相同的高度吗？

Can I really not use table markup to get two elements to have equal height?

html

css

tablelayout