使用 CSS 平均分配高度

2022-01-18 00:00:00 grid html css

我有一个非常棘手的 HTML 问题，我不确定是否有基于 CSS 的解决方案.基本上我有一个三列网格.第一列和第三列可以包含可变数量的行.第二列总是正好有一行.每行都有一个最小高度.

I have an HTML problem that is pretty tricky and I'm not sure there is a CSS-based solution for it. Basically I have a three column grid. The first and third columns can contain a variable number of rows in them. The second column always has exactly one row. Each row has a minimum height.

因此，行数最多的列会将高度设置为最小高度的所有行.其他列中的行应在高度上等量扩展以占用剩余空间.

So the column with the most rows will have all the rows with height set to the minimum height. The rows in the other columns should expand equally in height to take up the remaining space.

假设第一列有三行，每行 50 像素高.第二列必须有一行 150 像素高.如果第三列有 2 行，则每行必须为 75px 高.下面是一些图片来进一步说明我所追求的.

Say that column one has three rows, each 50px tall. Column two must have one row 150px tall. If column three has 2 rows they must each be 75px tall. Below are some pictures to further illustrate what I'm after.

这甚至可以通过 CSS 实现吗?

Is this even possible with CSS?

推荐答案

根据一些人的建议，我最终使用了一些简单的 javascript 来完成这项工作:

Per recommendations by a few folks, I ended up using some simple javascript to get this done:

$(document).ready(function() {
   var c1Rows = $(".col1 .row").length;
   var c3Rows = $(".col3 .row").length;

   var minHeight = 50;
   var max = Math.max(c1Rows, c3Rows);
   var totalHeight = max * minHeight;

   $(".col1 .row").css("height", totalHeight / c1Rows);
   $(".col2 .row").css("height", totalHeight);
   $(".col3 .row").css("height", totalHeight / c3Rows);
});

相关文章