使所有div孩子具有相同的身高

Question

我的网站有3个盒子，但所有3个盒子之间都有很大的余量。因此，我认为我无法使用CSS display:table来解决此问题，因此， 如何使带有浮动内容的div盒子具有与动态内容相同的高度没有帮助:(

 .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> 

小提琴

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

display:flex功能尚不完全受支持，因此我不想使用它。

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

Answer 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

Answer 2

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

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

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

Answer 3

您可以通过zurb基础使用均衡器 。

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