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

Question

My website has 3 boxes but also, a very definitive margin between all 3. As such, I don't think I can use CSS display:table to fix this issue so How to make div boxes with floats have the same height with dynamic content doesn't help :(

 .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

In my head, the wrapper has a height (which is the height of the highest child), and as such I would have hoped adding height:inherit would have worked in .box1, .box2 or .box3 but not

display:flex features are not fully supported yet so I don't want to use it.

How do I make all 3 the same height without using a fixed height.

Answer 1

Actually you can use CSS display:table to fix this. Below are the CSS, HTML and 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

If you are open to use a jQuery library, use this - http://brm.io/jquery-match-height/

Then its as simple as assigning a class and then do this:

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

Answer 3

You can use equalizer by zurb foundation.

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>

Add .js:

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

Start equalizer:

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

---

---

---

I know you don't want to use flex but just in case.

You can try something like this 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%;
}