Firefox 中的等高列 (CSS)

Question

我对等高列有疑问，我知道技术上一直有人问这类问题（从我的研究中得到的）但不幸的是我遇到了一个问题，我只是不知道知道还能尝试什么。

我在 Chrome 和 Opera 中有等高列，但 Firefox 不喜欢我做的方式。

我有一个简单的标记

<section id="env">
  <div class="container">
    <div class="content">
      <p>
        Way more content than in all the others because this one has so much to say and doesn't know when to stop...it always does that...
      </p>
    </div>
  </div>
  <div class="container">
    <div class="content">
      <p>
        Content 2
      </p>
    </div>
  </div>
  <div class="container">
    <div class="content">
      <p>
        Content 3
      </p>
    </div>
  </div>
</section>

和 #env div 显示为 table，.container divs 显示为 table-cells。

#env {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 5px;
}

.container {
  display: table-cell;
  border 25px solid transparent;
  width: 33.33333%;
}

.content {
  background: red;
  display: inline-block;
  vertical-align: top;
  height: 100%;
  width: 100%;
  border-radius: 3px;
}

p {
  padding: 0 20px;
}

我为此创建了一个 fiddle 来关注这个问题：https://jsfiddle.net/vy3Lzu75/1/

如果您在 Chrome 或 Opera 中打开它，您应该会看到三个同样高的红色列。然而，在 Firefox 中，红色列对应于它们在div中的相同内容，而不是实际的容器。

如果有人能给我指出正确的方向，我会非常感激，因为到目前为止我已经尝试过所有的事情（将父级的高度设置为 1px，设置子级的最小高度，不同的显示值...）在 FF 中没有成功。

提前致谢！

Answer 1

此处的单元格正在绘制列。 border-spacing 可用于在 .

周围设置一些区域

#env {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 30px 5px;
}

.container {
  display: table-cell;
  width: 33.33333%;
  background: red;
  border-radius: 3px;
  vertical-align: top;
}

.content {
}

p {
  padding: 0 20px;
}

<section id="env">
  <div class="container">
    <div class="content">
      <p>
        Way more content than in all the others because this one has so much to say and doesn't know when to stop...it always does that...
      </p>
    </div>
  </div>
  <div class="container">
    <div class="content">
      <p>
        Content 2
      </p>
    </div>
  </div>
  <div class="container">
    <div class="content">
      <p>
        Content 3
      </p>
    </div>
  </div>
</section>

https://jsfiddle.net/vy3Lzu75/2/

如果你想让内容填满所有 space 可用的内容，你需要将 flex boxes 和 margin 用来分隔每个 cols :

#env {
  display: flex;
  width: 100%;
  border-collapse: separate;
  border-spacing: 5px;
}

.container {
  display: flex;
  flex-flow:column;
  margin:5px 30px;
  width: 33.33333%;
  background: red;

}

.content {
  flex:1;
  background:green;
  border-radius: 10px;
}

p {
  padding: 0 20px;
}

<section id="env">
  <div class="container">
    <div class="content">
      <p>
        Way more content than in all the others because this one has so much to say and doesn't know when to stop...it always does that...
      </p>
    </div>
  </div>
  <div class="container">
    <div class="content">
      <p>
        Content 2
      </p>
    </div>
  </div>
  <div class="container">
    <div class="content">
      <p>
        Content 3
      </p>
      <p>
        Content 4
      </p>
    </div>
  </div>
</section>

https://jsfiddle.net/vy3Lzu75/7/

Firefox 中的等高列 (CSS)

Equal height columns in Firefox (CSS)

html

css

firefox

dynamic-columns