Встроенное изображение и подпись в статье - соответствие ширины подписи ширине изображения - PullRequest
Новая
       59

Встроенное изображение и подпись в статье - соответствие ширины подписи ширине изображения

2 голосов
/ 15 мая 2010

Вот мой код: 

<div class="image">
<img src="image.jpg" alt="Image description" />
<p class="caption">This is the image caption</p>
</div>

Вот мой CSS: 

.image {
position: relative;
float: right;
margin: 8px 0 10px 10px;
}

.caption {
font-weight: bold;
color: #444666;
}

Как указано выше, заголовок будет соответствовать ширине изображения. Моя проблема часто заключается в том, что размер img варьируется от ширины от 100 до 250 пикселей. Я бы хотел, чтобы ширина заголовка соответствовала ширине изображения, независимо от размера.

Хотелось бы, чтобы это было более семантическим, но я не уверен, насколько легко было бы переключить p.caption с img . Конечно, я бы предпочел этот метод, но делаю это шаг за шагом.

Есть ли какой-нибудь код jquery, который я могу использовать для определения ширины изображения и добавления этой ширины в качестве встроенного стиля к тегу заголовка?

Есть ли лучший способ сделать это? Я открыт для предложений.

1 Ответ

0 голосов
/ 15 мая 2010

Вы можете сделать что-то вроде этого: 

$(window).load(function() {
  $(".image p.caption").each(function() {
    $(this).width($(this).siblings("img").width()).prependTo($(this).parent());
  });
});

Это также делает перемещение <p> перед <img>, которое вы просили.

Для тестирования вы можете увидеть рабочую демонстрацию здесь .

...