使用CSS同等分布高度 [英] Equally distributing height with 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像素。第二列必须有一行150px高。如果第三列有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.

下面是一些图片来进一步说明我的后续。

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);
});

这篇关于使用CSS同等分布高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！