使所有 div 子项具有相同的高度答案

【问题标题】：Make all div children have the same height使所有 div 子项具有相同的高度
【发布时间】：2015-10-28 16:48:42
【问题描述】：

我的网站有 3 个框，但在所有 3 个框之间有一个非常明确的边距。因此，我不认为我可以使用 CSS display:table 来解决这个问题，所以 How to make div boxes with floats have the same height with dynamic content 没有帮不上忙 :(

.wrapper div {
	float:left;
}    
.box1 {
	background:blue;
	margin-right:10%;
}
.box2 {
	background:red;
	margin:0 10%;
}
.box3 {
	background:green;
	margin-left:10%;
}

<div class="wrapper">
	<div class="box1">asdf </div>
	<div class="box2">asdf  sadf<br /> saf safs<br /> fsdf  saf</div>
	<div class="box3">
            asdf <br />asdf <br />asdf <br />asdf <br />asdf <br />
            asdf <br />asdf <br />sfsa dfsdaf sdf sdf 
        </div>    
</div>

Fiddle

在我的脑海中，包装器有一个高度（这是最高孩子的高度），因此我希望添加 height:inherit 会在 .box1、.box2 或 .box3 中起作用，但不是

display:flex 功能是not fully supported yet，所以我不想使用它。

如何在不使用固定高度的情况下使所有 3 个高度相同。

【问题讨论】：

Flexbox 救援：css-tricks.com/snippets/css/a-guide-to-flexbox

标签： html css

【解决方案1】：

实际上你可以使用 CSS display:table 来解决这个问题。下面是 CSS、HTML 和 Fiddle

.wrapper {display:table;}

.box1 {background:pink;display: table-cell;}

.box2 {background:red;display: table-cell;}

.box3 {background:green;display: table-cell;}

<div class="wrapper">
        <div class="box1">asdf </div>
        <div class="box2">asdf  sadf<br /> saf safs<br /> fsdf  saf</div>
        <div class="box3">
        asdf <br />asdf <br />asdf <br />asdf <br />asdf <br />asdf <br />asdf <br />sfsa dfsdaf sdf sdf
        </div>    
</div>

  </div>
</div>

jsFiddle

【讨论】：

这个巫术是如何工作的。您已经设置了 .table-row 的样式，但我没有看到 HTML 元素引用此类。此外，这已经失去了我非常具体的利润
.table-row 不需要在那里。我从 CSS 中删除了它。关于边距，您要么必须为当前单元格提供填充，要么添加具有特定宽度的空白 DIV 作为间距。 @MyDaftQuestions

【解决方案2】：

如果您愿意使用 jQuery 库，请使用 - http://brm.io/jquery-match-height/

然后它就像分配一个类然后执行此操作一样简单：

$(".equal-heights").matchHeight();

【讨论】：

这里的问题是，除非您再次调用matchHeight，否则更改内容后它将不起作用
好点。您可以将其添加到导致内容更改的任何功能中，但是是的 - 它不是无缝的。

【解决方案3】：

您可以使用 zurb 基金会的equalizer。

HTML

<div class="wrapper" data-equalizer>
    <div class="box1" data-equalizer-watch>asdf </div>
    <div class="box2" data-equalizer-watch>asdf  sadf<br /> saf safs<br /> fsdf  saf</div>
    <div class="box3" data-equalizer-watch>asdf <br />asdf <br />asdf <br />asdf <br />asdf <br />asdf <br />asdf <br />sfsa dfsdaf sdf sdf </div>    
</div>

添加.js：

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.equalizer.js"></script>

启动均衡器：

<script>
    $(document).foundation();
</script>

我知道您不想使用 flex，但以防万一。

你可以试试这样JSFiddle:

.wrapper {
    display: flex;
}

.wrapper div {
    display: flex;
    align-items: center;
}

.box1 {
    background:blue;
    margin-right:10%;
}

.box2 {
    background:red;
    margin:0 10%;
}

.box3 {
    background:green;
    margin-left:10%;
}

【讨论】：