javascript - 两列不同数量的元素总高度相同

标签 javascript html css html-lists

我正在寻找在 html 和 css 中显示这种类型的网格的方法。

enter image description here

我想拉长较小的柱子以匹配较高的柱子。这可能吗?我已经尝试过使用一些 javascript 的解决方案,但对该解决方案并不满意。有一些复杂性,因为行数最多的列可能不是最高的。如果内容量不同,盒子的高度也可能不同。

我对此处使用的标记持开放态度,目前我并排使用两个列表,但表格或其他任何东西都可以。但是,仅使用 rowspan 似乎行不通,因为这只会给出一个比其他框大得多的框。这似乎是一个普遍的问题,有好的解决方案吗?

最佳答案

我认为您在这里被 JS 困住了。我的方法是对列表中的元素使用百分比高度。

  • 确定每个列表中元素的数量。
  • 将 100 除以该值(好吧,如果是 3、6 ... 等则比较棘手)
  • 以 % 为单位指定每个元素的高度
  • 不要忘记在父元素上设置高度,否则 % 不会起作用

关于javascript - 两列不同数量的元素总高度相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13628721/

相关文章:

javascript - 带有本地存储的下拉 CSS

javascript - 使用点击功能检查多个div中的数据属性值

css - child 在整个文档中选择

javascript - 如何将输出值显示为文本?

html - 在 Material-UI 中调暗/禁用 div 的最佳方法?

javascript - ng存储: retrive data with variable key

javascript - 如何检查从 Firebase 数据库获取的特定字符串以过滤接收到的数据?

javascript - 获取未点击的 div 的数据属性

html - 如何使两列高度相同且响应迅速

html - 悬停时的 CSS 过渡