Question

我的网站有3个方框，而且在所有3个方面都有一个非常明确的界限。因此，我不会认为我可以使用CSS display:table解决这个问题所以How to make div boxes with floats have the same height with dynamic content没有帮助:(

＆＃13;

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

＆＃13;

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

＆＃13;

Fiddle

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

display:flex功能为not fully supported yet，因此我不想使用它。

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

Answer 1

实际上你可以使用CSS display：table来解决这个问题。以下是CSS，HTML和小提琴

＆＃13;

.wrapper {display:table;}

.box1 {background:pink;display: table-cell;}

.box2 {background:red;display: table-cell;}

.box3 {background:green;display: table-cell;}

＆＃13;

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

＆＃13;

jsFiddle

Answer 2

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

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

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

Answer 3

您可以使用zurb foundation的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%;
}

让所有div孩子都有相同的身高

3 个答案: