时间戳

首页 > 解决方案 > 一种让不同列中的多个 div/元素共享相同高度的方法？

html - 一种让不同列中的多个 div/元素共享相同高度的方法？

问题描述

我在这里看到了一个类似的问题。

但我试图让不同列中的多个元素共享相同的高度，我无法绕开它。

这是我想要实现的视觉示例： 在此处输入图像描述

通常我会在容器中使用嵌套的文章标签，然后为子元素添加 div 或标题标签。但我想要实现的是让每列中的每个子元素都具有相同的高度。所以，所有的“标题” div 应该是相同的高度。所有“介绍”的 div 应该是相同的高度。所有“描述”的 div 应该是相同的高度。但我也无法定义这些元素的高度，因为它们需要响应地扩展/收缩。

我用 flexbox 和 css 网格尝试了这个，但只有在每列中有一个项目时我才成功。我确定我完全错误地处理了这个问题。

作为参考，在移动设备上，我希望文章标签堆叠（而不是并排），并且在移动设备上，这些子元素的高度不应全部相同。

这是我的 HTML。我放弃了 css，因为我不确定是否应该发布 flex 或 grid（无论如何都是失败的）。

<div class="container three-column">
    <div class="item item-1">
        <div class="thumb">Thumb</div>
        <div class="title">Title 1 - Lorem ipsum dolor sit amet</div>
        <div class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat elit velit, ac viverra arcu feugiat et. In volutpat, diam a vulputate commodo, tortor velit mattis lacus, at rhoncus felis purus mollis lectus. Suspendisse dignissim, mauris nec volutpat placerat, nunc odio sollicitudin</div>
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</div>
    </div>
    <div class="item item-2">
        <div class="thumb">Thumb</div>
        <div class="title">Title 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit </div>
        <div class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat elit velit, ac viverra arcu feugiat et. In volutpat, diam a</div>
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat elit velit, ac viverra arcu feugiat et. In volutpat, diam a vulputate commodo, tortor velit mattis</div>
    </div>
    <div class="item item-3">
        <div class="thumb">Thumb</div>
        <div class="title">Title 3 - Lorem ipsum dolor sit amet</div>
        <div class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat elit velit, ac viverra arcu feugiat et. In volutpat, diam a vulputate commodo, tortor velit mattis lacus, at rhoncus felis purus mollis lectus. </div>
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</div>
    </div>
</div>

这是可能吗？

标签： htmlcss

解决方案

推荐阅读