0

How can i make equal height rows with one DIV-Class without adress all Column-Classes but rather the row with the 4-Line-Text in the first row ?

Here is my example and the problem http://jsfiddle.net/8mh4s/1/

   $('.container').each(function() {  

        var highestBox1 = 0;
        $('.column').each(function(){

            if($(this).height() > highestBox1) 
               highestBox1 = $(this).height(); 
        }).height(highestBox1);  
});

my base was this Question - but this HTML based on row not colums: Setting equal heights for div's with jQuery

thanks to all !

Community
  • 1
  • 1
mlemtes
  • 3
  • 3

2 Answers2

0

I don't know exactly what you are lokking for, but maybe you should use .children():

http://jsfiddle.net/8mh4s/2/

$(this).children('.column').each(function(){...
Pascal Schimkus
  • 198
  • 1
  • 11
0

Demo

Use flexbox for css only solution

css

html, body {
    height: 100%;
    width: 100%;
    margin:0;
    padding:0;
    font-family: calibri;
}
.container {
    display: flex;
}
.column {
    flex: 1;
    border: 1px solid white;
    padding: 5px;
}
.column:nth-child(odd) {
    background-color: grey;
}
.column:nth-child(even) {
    background-color: lightgrey;
}
4dgaurav
  • 11,360
  • 4
  • 32
  • 59
  • looks good in the jiddle but in my work (DIV's in the colums) it destroys my structure – mlemtes Aug 05 '14 at 11:28
  • so how do you want the div in .column to look like? – 4dgaurav Aug 05 '14 at 11:32
  • among themselves - but now they are parallel and delayed - overall elements do not allow the 'display: flex' – mlemtes Aug 05 '14 at 11:43
  • http://jsfiddle.net/kWB99/4/ Like this - delete the JQuery-code and add "display: flex;" to .box and "flex: 1;" to .container - and see what i mean – mlemtes Aug 05 '14 at 12:15
  • I am not able to analyse how you want it to look like, Can you share a image of the layout you want? btw you didn't close tags properly, here in http://jsfiddle.net/4dgaurav/kWB99/5/ your code works same without jquery. – 4dgaurav Aug 05 '14 at 12:22
  • see my last edit [Link](http://jsfiddle.net/kWB99/4) when you put text into a container - the row grows up with the other divs in this row on one line (equal height). My proplem is that all Div's in this Div-Table grows up - i need it in the one row only (the other rows doesn't need this space in the box) i need this "growing up" in this row how i edit more text - not in the other ones and the flexbox-option doesn't work on IE8 - and iam sorry to say that its no way for my project – mlemtes Aug 06 '14 at 09:24