Question Comment faire div pas plus grand que son contenu?


J'ai une disposition similaire à:

<div>
    <table>
    </table>
</div>

Je voudrais pour le div pour étendre seulement à aussi large que mon table devient.


1687
2018-01-16 16:03


origine


Réponses:


La solution est de définir votre div à display: inline-block.


2033
2017-10-12 16:47



Vous voulez un élément de bloc qui a ce que CSS appelle shrink-to-fit largeur et la spécification ne fournit pas un moyen béni d'obtenir une telle chose. Dans CSS2, le «shrink-to-fit» n'est pas un objectif, mais signifie gérer une situation où le navigateur «doit» avoir une largeur hors de l'air. Ces situations sont:

  • flotte
  • élément absolument positionné
  • élément inline-block
  • élément de table

quand il n'y a pas de largeur spécifiée. J'ai entendu qu'ils pensaient à ajouter ce que vous voulez dans CSS3. Pour l'instant, faites avec l'un des ci-dessus.

La décision de ne pas exposer directement la fonctionnalité peut sembler étrange, mais il y a une bonne raison. Il est cher. Shrink-to-fit signifie le formatage au moins deux fois: vous ne pouvez pas commencer à formater un élément tant que vous ne connaissez pas sa largeur, et vous ne pouvez pas calculer la largeur sans passer par tout le contenu. De plus, on n'a pas besoin d'un élément rétractable pour s'adapter aussi souvent qu'on pourrait le penser. Pourquoi avez-vous besoin de div supplémentaire autour de votre table? Peut-être que la légende du tableau est tout ce dont vous avez besoin.


307
2018-01-16 16:40



Je pense en utilisant

display: inline-block;

fonctionnerait, mais je ne suis pas sûr de la compatibilité du navigateur.


Une autre solution serait d'envelopper votre div en autre div (si vous voulez maintenir le comportement du bloc):

HTML:

<div>
    <div class="yourdiv">
        content
    </div>
</div>

CSS:

.yourdiv
{
    display: inline;
}

196
2018-01-16 16:41



display: inline-block ajoute une marge supplémentaire à votre élément.

Je recommanderais ceci:

#element {
    display: table; /* IE8+ and all other modern browsers */
}

180
2018-05-12 23:39



display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

Foo Hack - Support de navigateur croisé pour le style inline-block (2007-11-19).


82
2017-08-25 19:36



Ce qui fonctionne pour moi est:

display: table;

dans le div. (Testé sur Firefox et Google Chrome).


74
2018-01-11 12:01



Tu peux essayer fit-content (CSS3):

div {
  width: fit-content; 
  /* To adjust the height as well */ 
  height: fit-content;
}

60
2018-05-27 00:41



Il y a deux meilleures solutions

  1. display: inline-block;

    OU

  2. display: table;

De ces deux display:table; est mieux. 

Pour display:inline-block; vous pouvez utiliser la méthode de la marge négative pour réparer l'espace supplémentaire


53
2018-05-10 20:16



La réponse à votre question repose dans le futur mon ami ...

à savoir "intrinsèque" vient avec la dernière mise à jour CSS3

width: intrinsic;

malheureusement C'EST À DIRE est derrière avec elle donc il ne le supporte pas encore

Plus à ce sujet: CSS Module de dimensionnement intrinsèque et extrinsèque Niveau 3 et Puis-je utiliser?: Dimension intrinsèque et extrinsèque.

Pour l'instant, vous devez être satisfait de <span> ou <div> mis à

display: inline-block;

41
2017-12-11 13:07



Ne sachant pas dans quel contexte cela apparaîtra, mais je crois que la propriété de style CSS float non plus left ou right aura cet effet. D'un autre côté, il aura également d'autres effets secondaires, tels que permettre au texte de flotter autour d'elle.

Corrigez-moi si je me trompe, je ne suis pas sûr à 100%, et actuellement je ne peux pas le tester moi-même.


35
2018-01-16 16:08