вопрос
Всем доброго времени суток. Появилась необходимость задать ширину области для картинок в короткой новости. Проблема в том, что все 4 картинки выстраиваются в ряд, тогда как необходимо сделать вывод 2х2, не затрагивая при этом текст. Я создал слой, заключил {short-story} в дивы, в CSS задал параметр для этого слоя .story img {???}...а дальше ступор - если задавать отступы, то картинки будут далеко друг от друга.
Подскажите новичку как лучше реализовать? Спасибо
Подскажите новичку как лучше реализовать? Спасибо
[center]Как есть:
[img] [img] [img] [img]
Текст Текст Текст Текст[/center]
[center]Как хотелось бы:
[img] [img]
[img] [img]
Текст Текст Текст Текст[/center]
Ширину области вы никак не зададите, не оборачивая картинки во что-либо, но можно поступить так:
При условии что все 4 картинки у вас находятся в начале. Если будет например смайлик перед ними - не сработает.
Как второй вариант - обернуть картинки в див и ограничить ему максимальную ширину.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Картинки</title>
<style>
.news {
text-align: center
}
</style>
</head>
<body>
<div class="news">
<img src="" width="400" height="360" alt="" />
<img src="" width="400" height="360" alt="" />
<img src="" width="400" height="360" alt="" />
<img src="" width="400" height="360" alt="" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery(function($) {
$(".news img:nth-child(2)").after("<div/>");
});
</script>
</body>
</html>
При условии что все 4 картинки у вас находятся в начале. Если будет например смайлик перед ними - не сработает.
Как второй вариант - обернуть картинки в див и ограничить ему максимальную ширину.
