Ako dosiahnuť, aby div nebol väčší ako jeho obsah?

Chcete blokový prvok, ktorý má šírku, ktorú CSS nazýva "shrink-to-fit", a špecifikácia neposkytuje požehnaný spôsob, ako takúto šírku získať. V CSS2 nie je zmenšenie na šírku cieľom, ale prostriedkom na riešenie situácie, keď prehliadač "musí" získať šírku zo vzduchu. Takéto situácie sú:

• float
• absolútne umiestnený prvok
• inline-block element
• prvok table

ak nie je zadaná šírka. Počul som, že sa uvažuje o pridaní toho, čo chcete v CSS3. Zatiaľ si vystačte s jedným z vyššie uvedených.

Rozhodnutie nevystaviť funkciu priamo sa môže zdať zvláštne, ale má to dobrý dôvod. Je to drahé. Zmenšovanie podľa veľkosti znamená formátovanie minimálne dvakrát: nemôžete začať formátovať prvok, kým nepoznáte jeho šírku, a šírku nemôžete vypočítať w/bez prechádzania celého obsahu. Navyše, prvok shrink-to-fit nie je potrebný tak často, ako by sa mohlo zdať. Načo potrebujete ďalší div okolo tabuľky? Možno vám stačí nadpis tabuľky.

Neviem, v akom kontexte sa to objaví, ale verím, že CSS-style vlastnosť float buď left alebo right bude mať tento efekt. Na druhej strane to'bude mať aj iné vedľajšie účinky, napríklad umožní textu plávať okolo neho.

Prosím, opravte ma, ak sa mýlim, nie som si tým na 100% istý a momentálne to nemôžem sám otestovať.

Riešením kompatibilným s CSS2 je použitie:

.my-div
{
    min-width: 100px;
}

Váš div môžete tiež floatovať, čo ho prinúti byť čo najmenší, ale budete musieť použiť clearfix, ak je niečo vo vnútri vášho divu plávajúce:

.my-div
{
    float: left;
}