Question

网站可以在这里看到：http://storagestaging.com/pricing/

关于四栏定价网格的问题。

我有一个四列定价网格。每列具有不同的高度（由于或多或少的内容）。我想让所有四列填充整个最高列/填充整个父div。

我尝试过display：table和display：table-cell，并将height = 100％添加到父div和子div。有时我会靠近，有时候我会让情况变得更糟。非常感谢任何帮助。

谢谢！

Answer 1

如果你决定使用div，那么JS（这是一个jQuery版本，如果你需要知道香草JS lemme）解决方案是可能的：

var max = 0;
$('.myDiv').each(function() {
    if ($(this).height() > max)
        max = $(this).height();
});
$('.myDiv').css('height', max + ' px');

Answer 2

你可以这样做css，只需父div的高度需要一个固定值。

See this example here

HTML

<div class="outer">
  <div class="inner a"></div>
  <div class="inner b"></div>
</div>

CSS

.outer{
  background: #000;
  width: 500px;
  height: 200px;
}

.inner{
  display:inline-block;
  width: 49%;
  height: 100%;

}

.a{
  background-color: green;
}

.b{
  background: red;
}

Answer 3

为了满足我的要求，我只需手动设置父节和子节的高度。

获取子div列以继承最高列的高度/填充整个父高度

3 个答案: