Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Стили (CSS) Как задать ширину области для картинок

Как задать ширину области для картинок


     07.07.2012    Стили (CSS)    2034

вопрос
Всем доброго времени суток. Появилась необходимость задать ширину области для картинок в короткой новости. Проблема в том, что все 4 картинки выстраиваются в ряд, тогда как необходимо сделать вывод 2х2, не затрагивая при этом текст. Я создал слой, заключил {short-story} в дивы, в CSS задал параметр для этого слоя .story img {???}...а дальше ступор - если задавать отступы, то картинки будут далеко друг от друга.
Подскажите новичку как лучше реализовать? Спасибо

[center]Как есть:
[img] [img] [img] [img]
Текст Текст Текст Текст[/center]

[center]Как хотелось бы:
      [img] [img]
      [img] [img]
Текст Текст Текст Текст[/center]

Ответил: ПафНутиЙ


Ширину области вы никак не зададите, не оборачивая картинки во что-либо, но можно поступить так:
<!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 картинки у вас находятся в начале. Если будет например смайлик перед ними - не сработает.

Как второй вариант - обернуть картинки в див и ограничить ему максимальную ширину.

Комментарии пользователей (4)

Sobak
18 | 18

Sobak - 8 июля 2012 13:53 - Юзер

Тогда вопрос по второму варианту:
Правильно понимаю, что не {short-story} | {full-story} нужно оборачивать в див, тогда что? Картинки при добавлении новости?
Разъясните, пожалуйста поподробнее. Спасибо

Sobak
18 | 18

Sobak - 8 июля 2012 15:14 - Юзер

О черт, я идиот. Почему бы просто при добавлении новости не сделать так
[center][img1] [img2][/center]
[center][img3] [img4][/center]

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 8 июля 2012 15:31 - Админ

Ну это ка бы самый очевидный вариант ))

Каков вопрос - таков и ответ. Просто помните об этом.

Sobak
18 | 18

Sobak - 8 июля 2012 15:39 - Юзер

ну да, очевиднейший, но я, видно, пересидел за монитором) голова уже ватная была видимо lol
ааа....не перестаю удивляться себе -_-

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы