Архив 
Нужна Ваша помощь
Задумал создать страничку/странички/ (смотри скриншот).
Но вот тут пара вариантов.
1-й вариант создание посредством таблицы, что и представлено на скриншоте.
2-й вариант - создание посредством стилей. В данном варианте Не получается вставить текст под картинками, не нарушая расположение изображений.
Создание посредством таблиц на сегодняшний день считается старомодным...
Задумал создать страничку/странички/ (смотри скриншот).
Но вот тут пара вариантов.
1-й вариант создание посредством таблицы, что и представлено на скриншоте.
2-й вариант - создание посредством стилей. В данном варианте Не получается вставить текст под картинками, не нарушая расположение изображений.
Создание посредством таблиц на сегодняшний день считается старомодным...
0 
0 
0  |  |  |
Комментарии (9)
ответил Undertakerr1
Да, как на скриншоте. С помощью стилей. Есть у меня заготовка со стилями, но явно не верно смонтированная. И нет подписей под картинками на ней
0 ответил Scorpion_311
Код ниже. Отступ у названия можно задать по-разному: line-height, margin, padding. Всё зависит от нужд.
<html>
<head>
<style>
.photo-list{
text-align: center;
}
.photo-list .photo-block{
display: inline-block;
margin: 20px;
width: 300px;
height: 250px;
vertical-align: top;
}
.photo-list .photo img{
position: relative;
max-width: 100%;
}
.photo-list .photo-name{
text-align: center;
font-weight: 600;
}
</style>
</head>
<body>
<div class="photo-list">
<div class="photo-block">
<div class="photo">
<img src="https://ic.pics.livejournal.com/gotskaya/15977901/237456/237456_900.jpg">
</div>
<div class="photo-name">Закат. Текст у всех по центру.</div>
</div>
<div class="photo-block">
<div class="photo">
<img src="https://ic.pics.livejournal.com/gotskaya/15977901/237456/237456_900.jpg">
</div>
<div class="photo-name" style="margin: 10px 0px 0px;">Закат</div>
</div>
<div class="photo-block">
<div class="photo">
<img src="https://ic.pics.livejournal.com/gotskaya/15977901/237456/237456_900.jpg">
</div>
<div class="photo-name">Закат</div>
</div>
<div class="photo-block">
<div class="photo">
<img src="https://ic.pics.livejournal.com/gotskaya/15977901/237456/237456_900.jpg">
</div>
<div class="photo-name">Закат</div>
</div>
<div class="photo-block">
<div class="photo">
<img src="https://ic.pics.livejournal.com/gotskaya/15977901/237456/237456_900.jpg">
</div>
<div class="photo-name">Закат</div>
</div>
<div class="photo-block">
<div class="photo">
<img src="https://ic.pics.livejournal.com/gotskaya/15977901/237456/237456_900.jpg">
</div>
<div class="photo-name">Закат</div>
</div>
</div>
</body>
<html>
0 Для добавления комментариев необходимо авторизоваться
Архив 
Удивительный колхоз
Удивительный колхоз - это новая многопользовательс
