Hur gör man så att div inte är större än innehållet?

Du vill ha ett blockelement som har det som CSS kallar krympa-till-anpassning-bredd och specifikationen ger inte något välsignat sätt att få detta. I CSS2 är shrink-to-fit inte ett mål, utan ett sätt att hantera en situation där webbläsaren "måste" hämta en bredd ur tomma intet. Dessa situationer är:

• float
• Absolut positionerat element
• inline-block element
• tabellelement

när ingen bredd har angetts. Jag har hört att de tänker på att lägga till vad du vill i CSS3. Tills vidare får du nöja dig med något av ovanstående.

Beslutet att inte exponera funktionen direkt kan tyckas märkligt, men det finns en bra anledning. Det är dyrt. Shrink-to-fit innebär att man måste formatera minst två gånger: man kan inte börja formatera ett element förrän man vet dess bredd, och man kan inte beräkna bredden utan att gå igenom hela innehållet. Dessutom behöver man inte krympa för att anpassa elementet så ofta som man kanske tror. Varför behöver du extra div runt din tabell? Kanske räcker det med en tabelltext.

Jag vet inte i vilket sammanhang detta kommer att visas, men jag tror att CSS-stilegenskapen float antingen left eller right kommer att ha denna effekt. Å andra sidan har den även andra sidoeffekter, till exempel att text kan flyta runt den.

Rätta mig om jag har fel, jag är inte 100 % säker och kan för närvarande inte testa det själv.

En CSS2-kompatibel lösning är att använda:

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

Du kan också låta div:en flyta, vilket gör den så liten som möjligt, men du måste använda en clearfix om något inom div:en flyter:

.my-div
{
    float: left;
}