HTML5 / CSS aligns the list of elements depending on other columns of mutual height

Question

I got the following use case:

You can see three identical fields: Each box starts with a large rectangle that has an image and variable content and, therefore, has a variable height. the rest consists of a list, i.e. a vertically aligned bottom, so they should get the same height.

My goal is to "synchronize" the height <li> in each of these fields. Therefore, it should not be important how much text you enter in such a <li> design should automatically process the word break and align the content as if it were a string.

, , .

display flex . : divs

: (, , .

flexbox, ?

, .

, .

!

UPDATE:

: http://jsfiddle.net/a1yr4u84/3/

, < br/" > li, .

<li>one <br /> two</li>
<li>one <br /> two <br /> three</li>
<li>one<br /><br /></li>

, , li. , < br/" > s, , ,

Answer 1

... : , , . , , .

flex. :

<div class="wrap">
  <div class="col left">
    <img src="..." />
    <div class="content">
        <p>...</p>
    </div>
  </div>
  <div class="col middle">
      <img src="" />
    <ul class="content">
        <li>...</li>
        <li>...</li>
    </ul>
  </div>
  <div class="col right">
      <img src="..." />
    <ul class="content">
        <li>...</li>
    </ul>
  </div>
</div>

flex , , flex-basis 33% () , .:

.wrap { display: flex; }
.wrap .col { flex: 1 0 33%; }

, flex . flex-basis :

.wrap .col { flex: 1 0 33%; display: flex; flex-direction: column; }
.col img, .col .content { flex: 0 0 auto; }

, margin-top:auto :

.col .content { margin-top: auto; }

.

Fiddle: http://jsfiddle.net/abhitalks/a1yr4u84/1/

* { box-sizing: border-box; }
.wrap {
  width: 80%; margin: 16px auto; padding: 12px; border: 1px solid grey;
  display: flex;
}
.wrap .col {
    flex: 1 0 33%; display: flex; flex-direction: column;
}
.col img, .col .content { flex: 0 0 auto; }
.col img { width: 128px; display: block; margin: 2px auto; }
.col .content { margin: auto 12px 0px 12px; }

<div class="wrap">
  <div class="col left">
    <img src="//lorempixel.com/128/128" />
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, impedit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
    </div>
  </div>
  <div class="col middle">
      <img src="//lorempixel.com/128/128" />
    <ul class="content">
        <li>one</li>
        <li>one</li>
        <li>one</li>
        <li>one</li>
    </ul>
  </div>
  <div class="col right">
      <img src="//lorempixel.com/128/128" />
    <ul class="content">
        <li>one</li>
        <li>one</li>
    </ul>
  </div>
</div>

Hide result

---

:

( op)

, , , CSS. , jQuery, jQuery.

height :

Fiddle 2: http://jsfiddle.net/abhitalks/a1yr4u84/4/

2:

var $lists = $('ul.content');

for (i=0; i < 10; i++) {
    var highest = 0;
    $lists.each(function(idx, elem) {
        var h = $(elem).children().eq(i).outerHeight();
        if (h > highest) highest = h;
    });
    $lists.each(function(idx, elem) {
        $(elem).children().eq(i).outerHeight(highest);
    });    
}

* { box-sizing: border-box; }
.wrap {
  width: 80%; margin: 16px auto; padding: 12px; border: 1px solid grey;
  display: flex;
}
.wrap .col {
    flex: 1 0 33%; display: flex; flex-direction: column;
}
.col img, .col .content { flex: 0 0 auto; }
.col img { width: 128px; display: block; margin: 2px auto; }
.col .content { margin: 0px 12px 0px 12px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="col left">
    <img src="//lorempixel.com/128/128" />
    <ul class="content">
        <li>one <br /> two</li>
        <li>one <br /> two <br /> three</li>
        <li>one</li>
        <li>one</li>
    </ul>
  </div>
  <div class="col middle">
      <img src="//lorempixel.com/128/128" />
    <ul class="content">
        <li>one</li>
        <li>one</li>
        <li>one</li>
        <li>one</li>
    </ul>
  </div>
  <div class="col right">
      <img src="//lorempixel.com/128/128" />
    <ul class="content">
        <li>one <br /> two</li>
        <li>one</li>
    </ul>
  </div>
</div>

Hide result

. 10 . .

Answer 2

css line-height . .