picture + comment >> css/div

<table>

<tr>

  <td><img src="..." /></td>

</tr>

<tr>

  <td>text under picture</td>

</tr>

</table>

как да преправя горния фрагмент от таблица на 2 див-а + css, така че текстът под картинката да е в блок, широк колкото самата картинка (но без във блока с текста ширината на картинката да е указана като атрибут!)

или казано с прости думи - трябва ми шаблон за визуализиране на изображение + текст под ТОЧНО под него.

Ето нещо за четене, където е описано:

[линк]


[линк]

въпросът е че ако със 2та стила:

div.float {

  float: left;

}

  

div.float p {

   text-align: center;

}

вместо

<div class="float">

  <img src="image1.gif" width="100" height="100"

  alt="image 1" /><br />

  <p>caption 1</p>

</div>

напишеш като коментар нещо по дълго, например:

<div class="float">

  <img src="image1.gif" width="100" height="100"

  alt="image 1" /><br />

  <p>caption 1 caption 1 caption 1 caption 1 caption 1</p>

</div>

дългият текст 'разпъва' и див-а, а точно това не искам да се случва

Задай ширина на дива, за да не се разтяга повече, отколкото е необходимо.
<br /> след картинката е излишен.

Scriptura pro scribente nihil probat...

въпросът е там, че искам да слагам картинки с различна големина, и искам текстът отдолу да върви по цялата ширина на картинката... ако задам дължина на дива, различна от дължината на картинката, ако тя е по-голяма, ще излезе извън дължината, но самият ДИВ няма да се разтегне позволявайки и на текста отдолу да е съответно с по-дълга ширина.

Е, ти пък, не може ли малко да уеднаквиш картинките, че да ги сложиш в равни по ширина контейнери? Текстът няма да е винаги широк колкото картинката, но пък навсякъде по страницата ще е с еднаква ширина.
Друг начин е да сложиш на всеки контейнер индивидуална ширина, обаче как ще се разберат при подреждането е въпросът.
Може би по-добрия вариант - индивидуална ширина на всеки параграф -
колкото е картинката над него, а контейнерите - равни по ширина, в проценти, да речем, центрирано съдържание, равномерно разпределение по ширината на страницата. За мене е излишно писане, обаче като е толкова важно ...

Scriptura pro scribente nihil probat...

как да сложа ширина като не я знам?

шаблонът ми трябва за ПХП код който да интерпретира ББкод... но по всичко изглежда че в тоя случай единственото добро решение е таблица и това си е!

наистина не мога да разбера как толкова просто нещо не може да се направи със CSS при положение че таблицата го прави интуитивно...

Хм .. ами ако на горния ред в таблицата имаш широка картинка, а в клетката под нея - тясна картинка с повечко текст, как ше накараш текста под тясната картинка да се свие до нейната ширина?

Scriptura pro scribente nihil probat...

не става, но не това е случая, нали :)

Аз така те разбрах, ти каза: "...така че текстът под картинката да е в блок, широк колкото самата картинка.."
Ако те устройва картинките да са "поорязани" (с цсс), може и да се подреди всичко по конец.
Иначе и таблицата не може да те оправи. Ако имаш 4 клетки на ред примерно, и ако в едната има доста широка картинка, таблицата ще се разтегне и вероятно ще направи хоризонтален скрол, а колоната отдолу ще стане също толкова широка.
Просто е невъзможно да подредиш автоматично и идеално на редове картинки с различни размери, това е.

Scriptura pro scribente nihil probat...

защо си мислиш че ще имам 4 клетки на ред... сега ми се спи, но утре ще пусна точно кодът който перфектно си върши работата със таблица...

Не мисля, че ще имаш 4 клетки на ред, казах "примерно". Предполагам, че ще са няколко картинки на ред, заради float: left;.
Ами дай да го видим тоя перфектен код, че да се разбере най-накрая какво точно искаш.

Scriptura pro scribente nihil probat...

това може да се направи и без таблица, но предпочитам да видя код и какво точно искаш да направиш, а не на няколко пъти да обясняваш как само с таблица можело да стане
т.е. дай по същество