Код вашей страницы

<html>
<head>
<style type="text/css">
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
</head>

<body>
<h3>Фотогалерея</h3>
<p>Измените размер окна браузера, чтобы посмотреть, что будет, когда изображениям не будет хватать места.</p>
<img src="../../style/image/chrome_big.gif" width="50" height="50" class="thumbnail">
<img src="../../style/image/firefox_big.jpg" width="50" height="50" class="thumbnail">
<img src="../../style/image/ie_big.jpg" width="50" height="50" class="thumbnail">
<img src="../../style/image/mozilla_big.jpg" width="48" height="50" class="thumbnail">
<img src="../../style/image/netscape_big.gif" width="50" height="50" class="thumbnail">
<img src="../../style/image/opera_big.jpg" width="50" height="50" class="thumbnail">
<h3 class="text_line">Второй ряд</h3>
<img src="../../style/image/chrome_big.gif" width="50" height="50" class="thumbnail">
<img src="../../style/image/firefox_big.jpg" width="50" height="50" class="thumbnail">
<img src="../../style/image/ie_big.jpg" width="50" height="50" class="thumbnail">
<img src="../../style/image/mozilla_big.jpg" width="48" height="50" class="thumbnail">
<img src="../../style/image/netscape_big.gif" width="50" height="50" class="thumbnail">
<img src="../../style/image/opera_big.jpg" width="50" height="50" class="thumbnail">
</body>
</html>

 

Результат в окне браузера

Фотогалерея

Измените размер окна браузера, чтобы посмотреть, что будет, когда изображениям не будет хватать места.

Второй ряд

К примерам CSS >> В раздел CSS >> На главную >>


HTML-верстка: инструменты и приемы профессиональной front-end разработки