question 1

by dine

HTML

<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...

CSS

body {
    font: 12px sans-serif;
}
* { 
    box-sizing: border-box;
}
.photo-grid, .photo-grid li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.photo-grid li {
    float: left;
    width: 200px;
    height: 225px;
    margin: 10px;
    display: table;
}
.photo-grid a {
    text-decoration: none;
    color: #666;
    text-align: center;
    vertical-align: bottom;
    display: table-cell;
}
.phott-grid a:hover {
    text-decoration: underline;
}
.photo-grid .photo-title {
    display: block;
    padding-top: 5px;
    white-space: nowrap;
    width: 200px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}