html - 使用 CSS 平均分配高度

Question

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

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

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

这甚至可以用 CSS 实现吗？

Answer 1

如果您不介意只在少数几个浏览器中工作，那么您完全可以使用纯 CSS 来做到这一点。继续，添加和删除任意数量的孙 div：

http://codepen.io/cimmanon/pen/ldmtJ

/* line 5, ../sass/test.scss */
.wrapper {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
}
@supports (display: flex) and (flex-wrap: wrap) {
  /* line 5, ../sass/test.scss */
  .wrapper {
    display: flex;
  }
}

/* line 9, ../sass/test.scss */
.a, .b, .c {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}
@supports (display: flex) and (flex-wrap: wrap) {
  /* line 9, ../sass/test.scss */
  .a, .b, .c {
    display: flex;
  }
}
/* line 13, ../sass/test.scss */
.a div, .b div, .c div {
  border: 1px solid;
  -webkit-flex: 1 0 100%;
  -ms-flex: 1 0 100%;
  flex: 1 0 100%;
}

/* Fancy it up! */
/* line 21, ../sass/test.scss */
.a {
  background: #ff9999;
  -webkit-flex: 1 1 10em;
  -ms-flex: 1 1 10em;
  flex: 1 1 10em;
}

/* line 26, ../sass/test.scss */
.b {
  background: #00e600;
  -webkit-flex: 1 1 10em;
  -ms-flex: 1 1 10em;
  flex: 1 1 10em;
}

/* line 31, ../sass/test.scss */
.c {
  background: #9999ff;
  -webkit-flex: 1 1 40%;
  -ms-flex: 1 1 40%;
  flex: 1 1 40%;
}

<div class="wrapper">
  <div class="a">
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
  </div>

  <div class="b">
    <div>b</div>
  </div>

  <div class="c">
    <div>c</div>
    <div>c</div>
  </div>
</div>

浏览器支持：Opera、Chrome、IE10。当 Firefox 终于开始支持包括flex-wrap 在内的当前 Flexbox 草案时，它也将在那里工作。

Answer 2

你基本上必须伪造它。您需要确保三列都有包装器 - 并且整个东西都有一个包装器。然后你可以做一些类似CSS Faux 列的事情，使第二列看起来和其他两列一样高。

Answer 3

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

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