CODEWITHSUNDEEP
jqueryhtmlcssheight
Ihor Tkachuk
Ihor Tkachuk

Reputation: 1118

How to set same height each list items?

I created a simple list with content:

HTML part:

<ul>
    <li>1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate eius sit provident delectus veniam impedit dicta doloremque. Harum culpa a consequatur fugit dolorem facere inventore corporis temporibus eius labore soluta.</li>
    <li>2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum autem culpa quam fugiat hic architecto odit ipsam saepe temporibus sint.</li>
    <li>3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita officia cumque odit amet consequuntur alias qui dignissimos tempore adipisci tenetur molestias hic modi fuga ad quod beatae iusto. Molestias eius.</li>
    <li>4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint in pariatur soluta dignissimos aspernatur voluptatibus quis suscipit vel nulla laborum cumque vitae assumenda ducimus quas quaerat consectetur ea adipisci praesentium!</li>
    <li>5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam rerum laborum esse pariatur optio impedit laboriosam perferendis eius unde rem soluta facilis placeat nesciunt voluptates incidunt. Quidem earum eius magni.</li>
</ul>

I need to display it in 2 columns. I added the CSS:

ul {
    overflow: hidden;
    list-style:none;
}

ul li {
    width: 50%;
    float:left;
    border: 1px solid #000;
    box-sizing: border-box;
}

But the third element rests on the first, thereby disrupting the structure. How to set a list of all elements of the same height?

http://jsfiddle.net/k6jL8yxu/2/

Updated:

I solved the problem by using СSS3:

ul li:nth-child(odd) {
    clear: left;
}

Updated JSFiddle

Upvotes: 1

Views: 1265

Answers (4)

Veeresh Charantimath
Veeresh Charantimath

Reputation: 4719

Add a min-height or even height attribute to contain it... You can remove the overflow hidden as it is not necessary here.

ul li {

width: 50%;
float:left;
border: 1px solid #000;
box-sizing: border-box;
min-height: 200px;

}

Upvotes: 0

Suresh Kamrushi
Suresh Kamrushi

Reputation: 16086

even you can set min-height:

ul li {
    width: 50%;
    float:left;
    border: 1px solid #000;
    box-sizing: border-box;
    min-height: 150px;
}

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337743

Assuming that the length of the li elements is dynamic and you can't set a static height using CSS, you can use a combination of map to get all the heights and then Math.max to set all li heights to the tallest one so they are consistent. Try this:

var $li = $('li');
var maxHeight = $li.map(function() {
    return $(this).height();
}).get();
$li.height(Math.max.apply(this, maxHeight));

Updated fiddle

Upvotes: 4

Billy
Billy

Reputation: 1043

You can set the height for every <li> item in the list. See the fiddle : http://jsfiddle.net/9hkyjjhq/

And the code :

ul li {
    width: 50%;
    float:left;
    border: 1px solid #000;
    box-sizing: border-box;
    height:150px;
}

Upvotes: 0

Related Questions