Πώς να κάνετε το div να μην είναι μεγαλύτερο από το περιεχόμενό του;

Θέλετε ένα στοιχείο μπλοκ που να έχει αυτό που η CSS ονομάζει πλάτος συρρίκνωσης προς προσαρμογή και το spec δεν παρέχει έναν ευλογημένο τρόπο για να πετύχετε κάτι τέτοιο. Στο CSS2, η συρρίκνωση σε προσαρμογή δεν είναι στόχος, αλλά μέσο για την αντιμετώπιση μιας κατάστασης όπου το πρόγραμμα περιήγησης "πρέπει" να βρει ένα πλάτος από το πουθενά. Αυτές οι καταστάσεις είναι:

• float
• Απολύτως τοποθετημένο στοιχείο
• στοιχείο inline-block
• στοιχείο πίνακα

όταν δεν έχει καθοριστεί πλάτος. Άκουσα ότι σκέφτονται να προσθέσουν αυτό που θέλετε στην CSS3. Προς το παρόν, αρκεστείτε σε ένα από τα παραπάνω.

Η απόφαση να μην εκθέσετε άμεσα το χαρακτηριστικό μπορεί να φαίνεται περίεργη, αλλά υπάρχει ένας καλός λόγος. Είναι ακριβό. Το Shrink-to-fit σημαίνει μορφοποίηση τουλάχιστον δύο φορές: δεν μπορείτε να ξεκινήσετε τη μορφοποίηση ενός στοιχείου μέχρι να γνωρίζετε το πλάτος του, και δεν μπορείτε να υπολογίσετε το πλάτος χωρίς να περάσετε από όλο το περιεχόμενο. Επιπλέον, δεν χρειάζεται κανείς το στοιχείο shrink-to-fit τόσο συχνά όσο νομίζει. Γιατί χρειάζεστε επιπλέον div γύρω από τον πίνακά σας; Ίσως η λεζάντα του πίνακα είναι το μόνο που χρειάζεστε.

Δεν γνωρίζω σε ποιο πλαίσιο θα εμφανιστεί αυτό, αλλά πιστεύω ότι η ιδιότητα CSS-style float είτε αριστερά είτε δεξιά θα έχει αυτό το αποτέλεσμα. Από την άλλη πλευρά, θα έχει και άλλες παρενέργειες, όπως το να επιτρέπει στο κείμενο να αιωρείται γύρω του.

Παρακαλώ διορθώστε με αν κάνω λάθος όμως, δεν είμαι 100% σίγουρος και προς το παρόν δεν μπορώ να το δοκιμάσω ο ίδιος.

Μια λύση συμβατή με CSS2 είναι η χρήση:

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

Μπορείτε επίσης να επιπλεύσετε το div σας, το οποίο θα το αναγκάσει να είναι όσο το δυνατόν μικρότερο, αλλά θα πρέπει να χρησιμοποιήσετε ένα clearfix αν οτιδήποτε μέσα στο div σας επιπλέει:

.my-div
{
    float: left;
}