elementy pływające css z nierównymi wysokościami w lewo iw górę w siatce
Zastanawiam się, jak mogę osiągnąć efekt na rysunku 1.
Co mam do tej pory to
.box { display: inline-block; vertical-align: top; width: 100px;}
Daje mi to wynik zilustrowany na rysunku 2. (Uwaga: zdaję sobie sprawę, że mogę to samo zrobić z pływakiem: w lewo)
Mój kod HTML wygląda mniej więcej tak:
<span class="box">A<br><br><br><br></span>
<span class="box">B<br></span>
<span class="box">C<br><br><br></span>
<span class="box">D<br><br><br></span>
<span class="box">E<br><br><br><br><br><br></span>
<span class="box">F</span>
<span class="box">G<br><br><br><br></span>
<span class="box">H<br></span>
<span class="box">I<br><br></span>
Chcę, aby każdy element unosił się jak najdalej w lewo, a tymczasem unosił się w górę.
Czy można to zrobić za pomocą czystego css, czy też potrzebuję jakiegoś javascript?
EDYTOWAĆ:
Ważne jest dla mnie, aby cała siatka znajdowała się na środku strony. Dlatego używam wyświetlacza: inline-block. Siatka nie powinna być również przymocowana do strony, ponieważ chcę, aby powracała do niej po zmianie rozmiaru okna.