Question 5 HTML

<!---

These are the requirements for this page:
 * divide the page into 4 columns with an unknown number of rows;
 * columns are equal in size with 10px spacing between them;
 * in every column 1 photo is displayed with the title below;
 * photo’s can be either portrait (150px X 200px) or landscape (200px X 150px), but you don’t know that upfront. A row can thus have only landscape, only portrait, or a mix of landscape and portrait photo’s;
 * the spacing between rows is always 10px. Because of the previous rule, rows can thus have unequal height; 
 * photo’s & title are aligned in the center of the column, the title is 5px below the photo;
 * titles are vertically aligned to each other;
 * the HTML is automatically generated & minified (all superfluous whitespace is removed);
 * you can not use any JavaScript in your solution

-->

<ul class="photo-grid"><li class="photo">
        <a href="#" class="photo-link">
            <img src="http://www.mtv.com/movies/a-z/h/hudgens_vanessa/150x200.jpg" class="photo-img"/>
            <span class="photo-title">a girl</span>
        </a>
</li><li class="photo">
        <a href="#" class="photo-link">
            <img src="http://i1132.photobucket.com/albums/m566/Feargraphics/Others/150x200.png" class="photo-img"/>
            <span class="photo-title">bender_wants_to_kill_all_the_people</span>
        </a>
 </li><li class="photo">
 	<a href="#" class="photo-link">
            <img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img"/>
            <span class="photo-title">MrSpock</span>
        </a>
 </li><li class="photo">
 	<a href="#" class="photo-link">
            <img src="http://simp-tv.at.ua/simp4/20-15s.png" class="photo-img"/>
            <span class="photo-title">Marge Simpson</span>
        </a>
 </li><li class="photo"> 		
        <a href="#" class="photo-link">
            <img src="http://www.natalyvoyage.com.ua/assets/images/catalog/eu/swiss/grindenwald/grindenwald.jpg" class="photo-img"/>
            <span class="photo-title">My future place to live</span>
        </a>
 </li><li class="photo">
        <a href="#" class="photo-link">
            <img src="http://www.prakse.lv/uploads/myEnterprise/section/40137_1.jpg?cec2be3a97f7ff89612ad39df976b45e" class="photo-img"/>
            <span class="photo-title">a ship</span>
        </a>
 </li><li class="photo">
        <a href="#" class="photo-link">
            <img src="http://spoki.tvnet.lv/upload/articles/12/125171/thumbs/200x150Svarigi-Konkurss-uz-1.jpg" class="photo-img"/>
            <span class="photo-title">BOOOOM</span>
        </a>
</li><li class="photo">
        <a href="#" class="photo-link">
            <img src="http://www.hullumaja.com/files/pictures/2009/01/03/thumbs/y5gJRzJrrm.jpg" class="photo-img"/>
            <span class="photo-title">Moto</span>
        </a>
</li><li class="photo">
        <a href="#" class="photo-link">
            <img src="http://m.addfun.ru/2009/02/18/bonus/04.jpg" class="photo-img"/>
            <span class="photo-title">night</span>
        </a>
</li><li class="photo">
        <a href="#" class="photo-link">
            <img src="http://online.alliance-fansub.ru/_ph/35/1/226354137.jpg" class="photo-img"/>
            <span class="photo-title">a boy</span>
        </a>
</li><li class="photo">
        <a href="#" class="photo-link">
            <img src="http://www.o5wap.ru/content/_cashe/4/5/1/451890eaa4e871b7dd6d9c9eb2c9113d2.jpg" class="photo-img"/>
            <span class="photo-title">these flowers are soooo nice</span>
        </a>
</li><li class="photo">
        <a href="#" class="photo-link">
            <img src="http://www.h-s-d.ru/_nw/4/78055513.jpg" class="photo-img"/>
            <span class="photo-title">fashion_is_sometimes_strange_strange_strange</span>
        </a>
</li><li class="photo">
 		<a href="#" class="photo-link">
            <img src="http://www.sveikata24.lt/media/_catalog/zarnynas1.jpg" class="photo-img">
            <span class="photo-title">Hungry?</span>
        </a>
 </li><li class="photo">
 	<a href="#" class="photo-link">
            <img src="http://zaxid.net/resources/photos/news/200_DIR/201211/1270966.jpg" class="photo-img"/>
            <span class="photo-title">kids</span>
        </a>
 </li><li class="photo">
 	<a href="#" class="photo-link">
            <img src="http://4.bp.blogspot.com/_JPejMNZEiI0/S4CH4fskXqI/AAAAAAAAHkI/JjXkrzjS2yE/s200/image%5B38%5D.png" class="photo-img"/>
            <span class="photo-title">friends</span>
        </a>
 </li><li class="photo">
 	<a href="#" class="photo-link">
            <img src="http://www.kino-teatr.ru/art/1815/pv_14862.jpg" class="photo-img"/>
            <span class="photo-title">Sheldon</span>
        </a>
 </li></ul>