Umieścić zawartość elementu listy na dole w css?

Question

Mam problem z umieszczeniem zawartości elementu listy na dole, w linii bazowej.

spojrzeć na to:

<ul> 
    <li class="box"> 
     <div class="close" ></div> 
     <div class="head"> Header </div> 
     <p class="area"> 
      This is Paragraph 
     </p> 
    </li> 
    <li class="box"> 
     <div class="close" ></div> 
     <div class="head"> Header </div> 
     <p class="area"> 
      This is Paragraph 
     </p> 
    </li> 
</ul> 

a część jQuery:

$(document).on("click", "ul li .head", function() { 

    $(this).parent('li').toggleClass('minimize'); 
    $(this).parent('li').children('p').toggle(); 

}); 

I wreszcie CSS

ul { position: static; bottom: -4px; width: 1150px; min-height: 250px; overflow:  hidden; 
} 
ul li { 
position: relative; 
border: 1px solid lightgray; 
width: 260px; 
background-color: #f2f2f2; 
display: inline-block; 
margin: 0 2px; 
} 
ul li .head { 
font-weight: bold; 
padding: 5px; 
background-color: #6D84B4; 
color: white; 
border: 1px solid #6D84B4; 
text-align: right; 
} 
p.area { padding: 8px; height: 200px; } 
.minimize { vertical-align: bottom;} 

Oto link jsFiddle:

link to jsFiddle

Opis
Kiedy klikam tylko jeden nagłówek, Skóry i akapitu nagłówka idzie dno. (OK) Ale kiedy klikam drugi nagłówek, obaj skaczą ponownie do góry.

jakakolwiek pomoc w tej sprawie.
Dzięki.

---

edytowany & rozwiązany:
Cóż, miałem nadzieję, że ktoś może mi pomóc rozwiązać ten problem w sposób css.
Ale zrobiłem lewę przy użyciu jQuery. to działa. ale nie wiem, czy to dobre, czy nie.

tutaj kod:
Updated Code

Answer 1

Problem pionowej-align jest to, że ustawia się elementu z jego inline sąsiednich rodzeństwa. Gdy oba są zminimalizowane, ponieważ są one tej samej wysokości, pojawiają się w jednej linii.

Polecam, używając position: absolute; i bottom: 0; stałej wysokości ul, chociaż będzie to wymagało kilku poprawek do aktualnej stylizacji.

Edycja:

Jak o wprowadzenie ul w div pojemnika i pozycjonowania absolutnego ul do spodzie tego.

Demo

Jedyną różnicą jest div wokół ul i zmieniłem następujący styl:

.container { 
    position: relative; 
    width: 1150px; 
    min-height: 282px; 
    overflow: hidden; 
    border: 1px solid #000; 
    padding: 0; 
    margin: 0; 
} 
ul{ 
    overflow: hidden; 
    position: absolute; 
    bottom:0; 
    padding: 0; 
    margin: 0; 
} 

Answer 2

Dodaj

white-space: nowrap; 

do ul

ul { position: static; bottom: -4px; width: 1150px; min-height: 250px; overflow:  hidden; 
white-space: nowrap;} 

H Działa to. :) Próbowałem tego kodu, usuwając nową część jQuery w zaktualizowanym kodzie i dodając to.