В html dd-элементе нет разрыва строки

Question

Я пытаюсь получить заголовок изображения, который является dd-элементом, чтобы разбить его, чтобы он был таким же широким, как и dt-элемент.Я не хочу использовать ширину и использование display: inline и float: left не работают.У меня есть код и пример: http://jsfiddle.net/PnyHs/11/. Я использую Firefox 9 для тестирования.

Единственное решение, которое я могу найти прямо сейчас, - это использовать javascript для измерения dt-элемента и установкиэта ширина для элемента dd.

Заранее благодарим за любую помощь и предложения.

Answer 1

Если вы хотите сохранить структуру вашего HTML и не использовать max-width, я осмелюсь сказать, что это невозможно, и вот почему:

Вы ожидаете, что объект img ограничитdd элемент.Однако оба элемента являются родственными элементами и могут быть ограничены по ширине только своим родителем (в качестве альтернативы элемент может быть растянут его дочерними элементами).Следовательно, dd будет расширяться настолько, насколько он хочет, потому что родительский элемент не ограничивает его.

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

Так что, к сожалению, если вы не измените свою HTML-структуру, это будет невозможно без JavaScript (если я не пропущу что-то очевидное).

Answer 2

Использование dl разметки для изображения и подписи является искусственным и не облегчает стилизацию. Единственный подход к проблеме (создание заголовка такой же ширины, как изображение), который не требует явного использования сценариев или настройки ширины изображения, явно заключается в использовании таблицы из одной ячейки с элементом caption, см. fiddle и моя страница с подписями к изображениям . Пример:

<table class="photo">
    <caption align="bottom">Image Caption with a very very very very very long    
     text</caption>
    <tr><td>
        <img title="" alt="" src="http://dummyimage.com/120x100/82d91f/fff">
    </td></tr>
</table>  

Answer 3

Можете ли вы добавить ширину к элементу dl?Та же ширина, что и у вашего изображения, вот так http://jsfiddle.net/PnyHs/12/