Форум Сайтостроение Веб-строительство

Сделать в абзаце отступ текста, который бы не влиял на картинки

Frost bite
На сайте с 20.10.2007
Offline
158
Frost bite
489

Редактор Wordpress автоматом проставляет теги p, и изменить структуру не получится. Задача сделать только отступ для текста, но при этом картинки должны остаться на месте.

<div class="text">

<p><img /></p>

<p>текст</p>

</div>

Если задать margin-left для .text p и отрицательный margin-left картинке, то ее(картинки) максимальная ширина становится равна блоку с учетом margin для .text p, поэтому такое решение не подходит.

.text p img {

position: relative;

left: -10%;

} - аналогично делает картинки размером, который учитывает margin-left .text p

Идеи? Всем заранее спасибо!

Jor
На сайте с 23.06.2012
Offline
42
Jor
#1
Frost bite:
Если задать margin-left для .text p и отрицательный margin-left картинке, то ее(картинки) максимальная ширина становится равна блоку с учетом margin для .text p, поэтому такое решение не подходит.

А если ещё width задать для картинки?

.text p {
    margin: 0 0 0 24px;
}

.text img {
    margin: 0 0 0 -24px;
}

<img src="#" width="+24px к размеру">

или так:

.text p {
    margin: 0 0 0 5%;
}

.text img {
    margin-left: -5%;
    max-width: 105%;
}
Frost bite
На сайте с 20.10.2007
Offline
158
Frost bite
#2
Jor:
А если ещё width задать для картинки?

На сайте уже очень много картинок и все с заданным width(его сам wordpress автоматом проставляет). Плюс на мобильных устройствах картинки форматируются правилом:

height: auto;

width: 100%;

http://en.forums.wordpress.com/topic/how-do-i-add-padding-to-text-and-only-text вот тут еще эта проблема так и не решена.

---------- Добавлено 02.12.2014 в 22:26 ----------

Jor:
max-width: 105%;

Заработало! Огромное спасибо!

Возможности для брендинга в Google AdSense улучшил адаптивные В Яндекс.Директе появилась возможность

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий