Ik heb een lay-out vergelijkbaar met:
<div>
<table>
</table>
</div>
Ik zou graag willen dat de div
alleen zo breed wordt als mijn table
wordt.
Je wilt een blok-element dat heeft wat CSS shrink-to-fit width noemt en de spec geeft geen gezegende manier om zoiets te krijgen. In CSS2, is shrink-to-fit geen doel, maar een middel om om te gaan met een situatie waar de browser "has to" een breedte uit de lucht moet plukken. Die situaties zijn:
wanneer er geen breedte is opgegeven. Ik heb gehoord dat ze er aan denken om in CSS3 toe te voegen wat je wilt. Voor nu, doe het met een van de bovenstaande.
De beslissing om de functie niet direct bloot te leggen lijkt misschien vreemd, maar er is een goede reden voor. Het is duur. Shrink-to-fit betekent op zijn minst twee keer opmaken: je kunt een element niet opmaken voordat je de breedte ervan weet, en je kunt de breedte niet berekenen zonder door de hele inhoud te gaan. Bovendien heb je het shrink-to-fit element niet zo vaak nodig als je zou denken. Waarom heb je een extra div rond je tabel nodig? Misschien is een bijschrift bij de tabel alles wat je nodig hebt.
Ik weet niet in welke context dit zal verschijnen, maar ik geloof dat de CSS-style eigenschap float
ofwel left
ofwel right
dit effect zal hebben. Aan de andere kant zal het ook andere neveneffecten hebben, zoals het laten zweven van tekst er omheen.
Corrigeer me als ik het mis heb, ik weet het niet 100% zeker, en kan het momenteel niet zelf testen.
Een CSS2-compatibele oplossing is het gebruik van:
.my-div
{
min-width: 100px;
}
Je kunt je div ook laten zweven, waardoor hij zo klein mogelijk wordt, maar je zult een clearfix moeten gebruiken als iets binnen je div zwevend is:
.my-div
{
float: left;
}