List Items with Same Height

List items with same height

Ahh, yee old same height column problem.

One solution is to fart around with bottom margin / padding.

Works in IE7+ (might even work using ie6, I don't have it installed)

ul {
    overflow: hidden;
    border: 1px solid black;
    float: left;
}
li {
    float:left;
    width:100px;
    background: red;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}
li + li {
    border-left: 1px solid black;
}

JSfiddle Demo

Force two li elements to have same height

The easiest way I believe is using flexbox.

ul {
  display: flex;
}

* {

  box-sizing: border-box;

}

ul {

  padding: 0;

  border: 1px solid red;

  display: flex;

}

li {

  list-style-type: none;

  margin: 0;

  padding: 1em;

  width: 35%;

  margin-right: 50px;

  border: 1px solid #888;

}

<ul>

  <li>

    <h2>caption 1</h2>

    <p>.</p>

    <p>.</p>

    <p>.</p>

    <p>.</p>

    <p>.</p>

    <p>.</p>

  </li>

  <li>

    <h2>caption 2</h2>

    <p>...</p>

  </li>

</ul>

how to get list items always same height?

You can give a look at https://css-tricks.com/snippets/css/a-guide-to-flexbox/

body{

background-color: darkslategrey;

  color: white;

}

ul {

  list-style: none;

  display:flex;

}

span div {

  width: 5rem;

}

li {

  /*display: inline-block;*/

  /* flex can be imbricated and use to position children */

  display:flex;

  align-items:center;

  justify-content:center;

  /* end flex example ... follow the tutorial ;) */

  text-align: center;

  border: 1px solid cyan;

/*   transform: skewX(30deg); */

  margin: 1px;

  padding: 8px 18px;

 

}

li span {

  display:inline-block;

/*   transform: skewX(-30deg); */

}

p {

  margin: 0;

}

h1 {

  margin: 0;

}

.c {

  font-size: 4rem;

}

<ul>

  <li><p>babboon</p></li>

  <li>

    <span>

      <div><h1>A</h1></div>

        <p>anton</p>

      </span>     

  </li>

  <li>

    <span>

      <div><h1>B</h1></div>

        <p>Bert</p>

      </span>     

  </li>

  <li>

    <span>

      <div><h1 class="c">C</h1></div>

        <p>conner</p>

      </span>     

  </li>

</ul>

Equal height items in a list

The issue here just seems to be a matter of lag-time between a window resize and the actual window.resize event firing. By wrapping the event in a window resize and adding a slight timeout, I've manage to remedy the issue:

var lagTime = 500;   //Play around with this number
$(window).on("resize", function() {
    setTimeout(function() {
    $('.product-info .product-name').matchHeight({
        property: 'min-height'
    })}
    , lagTime);
}).trigger("resize");

Notice I've also included a .trigger() on the end of it, which will fire the resize event once when the page loads.

---

Consider reducing the lagTime variable as needed, you should be able to get away with something lower than the 500 that I'm using in this example.

How to make li the same height as its a child?

Using display: inline-block on <a> would work better for you, without getting any other disturbance.
read more here

---

Related Topics