Всем привет. Сейчас делаю одно задание (не связанное с курсами в целом. друг попросил). Смысл в том, что нужна просто галлерея в ряд с картинками и под каждой картинкой в 1 строчку, по ширине картинки подпись (если не помещается, то троеточие). В целом, я смог разместить картинки по центру, все как надо, но вот с подписями незадача. Я разместил картинки в одном блоке и подпись появляется лишь только под одной картинкой. Помогите, как мне сделать так, что бы подпись была под каждой?
Вот мой код html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Испытание: макет-прототип</title>
<link rel="stylesheet" type="text/css" href="lol.css" />
</head>
<body background="photo/img0.jpg">
<figure class="sign">
<div class="scrolling">
<img src="photo/ППдиод.jpg" alt="Фотография 2">
<img src="photo/ППдиод.jpg" alt="Фотография 3">
<img src="photo/ППдиод.jpg" alt="Фотография 4">
<img src="photo/ППдиод.jpg" alt="Фотография 5">
<img src="photo/ППдиод.jpg" alt="Фотография 6">
<img src="photo/ППдиод.jpg" alt="Фотография 7">
<img src="photo/ППдиод.jpg" alt="Фотография 8">
<img src="photo/ППдиод.jpg" alt="Фотография 9">
<img src="photo/ППдиод.jpg" alt="Фотография 10">
<img src="photo/ППдиод.jpg" alt="Фотография 11">
<div class="caption">Все дальнейшее далеко выходит за рамки текущего исследования</div>
</div>
</figure>
</body>
И код CSS:
body {
padding: 250px;
font-family: Arial, sans-serif;
font-size: 14px;
overflow: auto;
background-size: cover;
overflow-y: hidden;
}
.scrolling {
margin: 0 auto;
width: 100%;
height: 100%;
margin-left: -20%;
white-space: nowrap; /* чтобы картинки стояли в одну линию, не переходя на другую строку */
word-wrap: normal; /* то же для IE */
}
.scrolling img {
width: 200px;
height: 200px;
margin-right: 20px;
}