Creating the height of the list of elements in a row corresponds to their highest height

Question

On this page: http://pastehtml.com/view/1biylhs.html

You can see that the book in the center requires more height space than the other two books on the same line, because its title has more text.

Currently, each book is contained in <li>and has a height of 175 pixels.

I can set their height to auto, but it still cannot make all the list items on one line, following the highest height among them:

http://pastehtml.com/view/1bj19w3.html

What is the easiest way to get list items on each line to follow the highest height of these list items on this line? I have to get it to work in IE6 as well.

Many thanks to all of you.

Answer 1

I suggest adding extra markup. Make it a list of listings.

Something like that

<ul>
 <li class="row">
  <ul>
   <li class="book">
    <img />
    <h2>title</h2>
   </li>
   <li class="book">
    <img />
    <h2>title</h2>
   </li>
   <li class="book">
    <img />
    <h2>title</h2>
   </li>
  </ul>
 </li>
<!-- repeat rows here--></ul>

Then some CSS along the lines

.row {clear: left; sail left; min-height: 175px; }

Pay attention to the minimum height, which allows you to increase the height. You will need to deliver the height to IE6 to achieve the same effect. You have many options for this. Conditional comments are one of the standard options.

, , h2 div, . , , , h2 ( ) , div.

Answer 2

Javascript:

function resizerows(classname) { 
    //init some vars
    var tablerowlist = new Array();
    var maxheight=0;

    //get all elements with same class
    var rowlist = document.getElementsByTagName("li");

    //loop through items and check class name
    for (var r=0; r<rowlist.length; r++) { 
        if (rowlist[r].className.indexOf(classname) != -1) {
            //if class name contains classname this is an li we are looking for, add to our array
            tablerowlist.push(rowlist[r]);
        }//end class name check
    }//end loop through all the li elements

    //loop through our good list of li elements
    for(var l=0; l<tablerowlist.length; l++) {
        //dig through the li tag and get all the elements 
        var childlist = tablerowlist[l].children;

        //init a max height

        //loop through the child elements (in this case <p> tags)
        for(var c=0; c<childlist.length; c++) { 
            //check to make sure its a P tag
            if (childlist[c].tagName == "P") { 
                //compare height of element to maxheight, if greater maxheight = element height
                if (childlist[c].offsetHeight > maxheight) { 
                    maxheight = childlist[c].offsetHeight; 
                }
            }
        }//end loop through child elements

        //now we have the maxheight loop through all the rows and set the height to max height
        for (var ch=0; ch<childlist.length; ch++) {
            childlist[ch].style.height = (maxheight)  + "px";
        }

        //reset max height;
        maxheight = 0;
    }//end loop through the li elements
}

, , jquery, , - .

:

HTML-, :

<ul>
<li class="row">
    <p class="item">Item 1</p>
    <p class="item">Item 2</p>
    <p class="item">Item 3, which is really really long text that'll be bigger than the other two items</p>
</li>

<li class="row">
    <p class="item">Item 1</p>
    <p class="item">Item 2</p>
    <p class="item">Item 3, which is really really long text that'll be bigger than the other two items</p>
</li>

Answer 3

. , , .

( , , , -), .

As a compromise, I would suggest making each floating block high enough for an image and three lines of text. Then each of them has the same height and is beautifully aligned. This is still speculation, but probably the best you can do ..