Как я могу сделать ширину подписи к изображению такой же, как изображение? Теперь у меня есть следующий код:
<div class="image">
<img src="foo.jpg" alt="" />
<div>This is the caption.</div>
</div>
Я пробовал много вещей (плавающее, абсолютное позиционирование и т. д.), но если заголовок длинный, он всегда делает div широким, а не многострочным. Проблема в том, что я не знаю ширину изображения (или длину подписи). Это единственный способ решить эту таблицу использования?
Таким образом, проблема в том, что вы не знаете, насколько широким будет изображение, а заголовок для изображения может превышать ширину изображения, и в этом случае вы хотите ограничить ширину заголовка шириной изображения.
В моем случае я применил display:table к родительскому элементу и применил display:table-caption и caption-side:bottom к элементу заголовка следующим образом:
<div class="image" style="display:table;">
<img src="foo.jpg" alt="" />
<div style="display:table-caption;caption-side:bottom;">This is the caption.</div>
</div>
Вы можете применить display:table; и произвольную начальную ширину, например. width:7px; в родительский блок, например figure, и все будет работать как положено!
Вот живая демонстрация: http://jsfiddle.net/blaker/8snwd/
Ограничение этого решения заключается в том, что IE 7 и более ранние версии не поддерживают display:table;, а IE 8 требует, чтобы ваш тип документа был !DOCTYPE.
Источники:
Если проблема в том, что заголовок слишком длинный, вы всегда можете использовать
div.image {
width: 200px; /* the width you want */
max-width: 200px; /* same as above */
}
div.image div {
width: 100%;
}
И подпись останется статической. Кроме того, имя тега — img, а не изображение.
Или, если вы хотите определить ширину изображения, вы можете использовать jQuery:
$(document).ready(function() {
var imgWidth = $('.image img').width();
$('.image div').css({width: imgWidth});
});Таким образом, вы получаете ширину изображения, а затем устанавливаете для него ширину подписи.
Единственный способ сделать подписи должным образом — это заключить изображение и подпись в таблицу, состоящую из элементов span с атрибутами css table, table-row и table-cell.
Любой другой метод (включая теги фигур HTML5) либо приводит к несоответствию ширины, либо вызывает нежелательные разрывы строк.
Если ваш метод должен работать в браузере, отличном от css3, то лучше всего подойдет таблица.
Вы можете попробовать установить оболочку div изображения display:inline-block
http://jsfiddle.net/steweb/98Xvr/
Если подпись длинная, единственным решением будет установить фиксированную ширину или установить ширину div .image с помощью js. Я пытаюсь думать о чистом решении css, но я думаю, что это сложная задача :)
Ключ в том, чтобы рассматривать изображение как имеющее определенную ширину и длину. В приведенном ниже примере я проверил, и мое изображение было шириной 200 пикселей. А затем обработайте заголовок как встроенный блок.
HTML:
<div style="width:200px;">
<img src="anImage.png" alt="Image description"/>
<div class="caption">This can be as long as you want.</div>
</div>
CSS:
.caption {
display: inline-block;
}
Вы также можете заменить встроенный блок текстом, который выровнен по левому краю, по правому краю или растянут по точной ширине изображения, заменив указанный выше css одним из следующих:
.caption {
/* text-align: left; */
/* text-align: right; */
text-align: justify;
}
