Верстка иллюстраций с подписями.

[stupidtrue]

Доброй ночи.

Делаю электронный вариант учебника и столкнулся с трудностью подачи иллюстраций.

Помогите пожалуйста.

Допустим есть блок с картинкою

<div class="illustration">
  <img src="imge.jpg" alt="imge" width="640" height="480">
  <span>подпись</span>
</div>

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

illustration 

такую же, как ширина картинки?

Ответ - записать:

width="640"

не годится

Как это сделать на JavaScript? или есть какое то свойство по типу "width: inherit;" только которое бы наследовало ширину ребенка а материнский элемент?

Любые ссылки приветствуются.

Edited August 16, 2012 by stupidtrue

[lexxcode]

Примерно в общих чертах так div.img - это имитация картинки.

[wwt]

http://jsfiddle.net/A8BLP/3/

[Catherine]

Примерно в общих чертах так div.img - это имитация картинки.

Alexriz, div.img - это, насколько я понимаю, просто для примера? То-есть на деле имелось в виду это?

[Softlink]

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

[Catherine]

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

Softlink, так? Я правильно понимаю?

[Softlink]

Softlink, так? Я правильно понимаю?

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

[lexxcode]

Alexriz, div.img - это, насколько я понимаю, просто для примера? То-есть на деле имелось в виду это?

ну да, я же написал, обломался картинку лить куда-то просто, сути то это не меняет. А то, что текст будет растягивать блок это да, не учел

[stupidtrue]

Примерно в общих чертах так div.img - это имитация картинки.

Спасибо, но мне очень не хотелось вставлять картинку через фон.

Если ничего луче не придумаю то использую ваш код... спасибо

http://jsfiddle.net/A8BLP/3/

Вы очень хитер, спасибо за метод

вот кому интересно в справочнике

Пример 8.4. Сочетание разных классов

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

Да, да. Именно так.

Извиняюсь за неясное изложение своих мыслей. Я новичок на форуме.

Очень благодарен за сэкономленное мне время

[lexxcode]

Спасибо, но мне очень не хотелось вставлять картинку через фон.

Если ничего луче не придумаю то использую ваш код... спасибо

та картинку не в фон нужно, а просто вместо того блока вставляете img и аналогично оформляете в css. Мне просто не охота было морочить голову в 3 часа ночи с картинкой, и я ее заменил блоком.

[stupidtrue]

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

Softlink, так? Я правильно понимаю?

Я не специалист, но вроде работает да и еще как я хотел

Осталось еще добавить обтекание текстом блоков с чем я сам справлюсь.

Большое спасибо.

[stupidtrue]

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

Softlink, так? Я правильно понимаю?

Я не специалист, но вроде работает да и еще как я хотел

Осталось еще добавить обтекание текстом блоков с чем я сам справлюсь.

Большое спасибо.

Добавил

clear: both;

Но обтекании не пропало, в чем я ошибаюсь?

[Catherine]

Не нужен тут clear: both, потому что никакого обтекания-то и не было. Зато есть строчно-блочный элемент .illustration, выровненный по верхнему краю строки. Уберите display: inline-block у .illustration, если нужен такой вариант. И текст, лично я бы, к примеру, заключала в абзацы.

Edited August 18, 2012 by Catherine

[stupidtrue]

Не нужен тут clear: both, потому что никакого обтекания-то и не было. Зато есть строчно-блочный элемент .illustration, выровненный по верхнему краю строки. Уберите display: inline-block у .illustration, если нужен такой вариант. И текст, лично я бы, к примеру, заключала в абзацы.

А, вкурил, спасибо.

Мне так нравится этот форум очень благодарен за помощь.