【问题标题】: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>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-05-08
      • 1970-01-01
      • 2014-11-05
      • 2016-05-12
      • 2021-12-22
      • 1970-01-01
      相关资源
      最近更新 更多