Tailwind：响应地使两个兄弟 div 具有相同的高度答案

【问题标题】：Tailwind: make two sibling divs same height responsivelyTailwind：响应地使两个兄弟 div 具有相同的高度
【发布时间】：2021-09-29 21:47:56
【问题描述】：

我想在文字旁边放一张图片，但我希望图片和文字高度相同。

我已经找到了很多应该做到这一点的方法，但都没有奏效。

从这个小提琴中可以看出：

https://jsfiddle.net/60shvm8d/2/

我希望在较大的显示器中使用object-fit: cover 裁剪图像并与文本具有相同的高度，但在较小的显示器中，我希望右侧的 div 与图像一样高并且具有一个卷轴。

我怎样才能做到这一点？

如果无法做到这一点，我至少希望带有图像的 div 的高度受到带有文本的高度的限制，即使在更大的显示器中也是如此。

【问题讨论】：

标签： tailwind-css

【解决方案1】：

如果您知道自己需要什么，那就更容易了。例如，“table-cell”将是您问题的答案。

这里是链接：https://tailwindcss.com/docs/display

<div class="table w-full">
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell">A cell with more content <br></div>
      <div class="table-cell">Cell 2</div>
      <div class="table-cell">Cell 3</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Cell 4</div>
      <div class="table-cell">A cell with more content</div>
      <div class="table-cell">Cell 6</div>
    </div>
  </div>
</div>

【讨论】：