Comment faire div pas plus grand que son contenu?

J’ai une mise en page similaire à:

Je voudrais que le div ne prenne que la largeur de ma table .

    La solution consiste à configurer votre div pour display: inline-block .

    Vous voulez un élément de bloc qui a ce que CSS appelle la largeur d’ajustement et la spécification ne fournit pas un moyen béni d’obtenir une telle chose. Dans CSS2, la réduction de la taille ne constitue pas un objective, mais signifie que le navigateur doit “avoir” une largeur de volume. Ces situations sont les suivantes:

    • flotte
    • élément positionné absolument
    • élément de bloc en ligne
    • élément de table

    lorsqu’il n’y a pas de largeur spécifiée. J’ai entendu dire qu’ils pensaient append ce que vous vouliez dans CSS3. Pour l’instant, se débrouiller avec l’un des éléments ci-dessus.

    La décision de ne pas exposer la fonctionnalité directement peut sembler étrange, mais il y a une bonne raison. Il est cher. Rétrécir pour ajuster signifie formater au moins deux fois: vous ne pouvez pas commencer à formater un élément tant que vous n’en connaissez pas la largeur, et vous ne pouvez pas calculer la largeur sans parcourir tout le contenu. De plus, on n’a pas besoin d’élément de rétrécissement aussi souvent qu’on peut le penser. Pourquoi avez-vous besoin de div supplémentaire autour de votre table? Peut-être que la légende de la table est tout ce dont vous avez besoin.

    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’emballer votre div dans une autre div (si vous voulez conserver le comportement du bloc):

    HTML:

     
    content

    CSS:

     .yourdiv { display: inline; } 

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

    Je recommanderais ceci:

     #element { display: table; /* IE8+ and all other modern browsers */ } 
     display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; 

    Foo Hack – Prise en charge de plusieurs navigateurs pour la création de blocs en ligne (2007-11-19) .

    Ce qui marche pour moi c’est:

     display: table; 

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

    Vous pouvez essayer le fit-content (CSS3):

     div { width: fit-content; /* To adjust the height as well */ height: fit-content; } 
    • Support du navigateur
    • spécification

    Il y a deux meilleures solutions

    1. display: inline-block;

      OU

    2. display: table;

    Parmi ces deux display:table; est mieux.

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

    La réponse à votre question est dans le futur mon ami …

    à savoir “insortingnsèque” vient avec la dernière mise à jour CSS3

     width: insortingnsic; 

    malheureusement, IE est en retard avec elle donc il ne le supporte pas encore

    Plus d’informations à ce sujet: Module de dimensionnement exsortingnsèque et exsortingnsèque CSS, niveau 3, puis -je utiliser? : Dimensionnement insortingnsèque et exsortingnsèque .

    Pour l’instant, vous devez être satisfait de ou

    défini sur

     display: inline-block; 

    Ne sachant pas dans quel contexte cela apparaîtra, mais je pense que la propriété de style CSS float à left ou à right aura cet effet. D’un autre côté, cela aura également d’autres effets secondaires, tels que laisser le texte flotter autour de lui.

    S’il vous plaît corrigez-moi si je me trompe si, je ne suis pas sûr à 100%, et actuellement ne peut pas le tester moi-même.

     width:1px; white-space: nowrap; 

    ça marche bien pour moi 🙂

    Une solution compatible CSS2 consiste à utiliser:

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

    Vous pouvez également faire flotter votre div qui le forcera aussi petit que possible, mais vous devrez utiliser un clearfix si quelque chose dans votre div est flottant:

     .my-div { float: left; } 

    OK, dans de nombreux cas vous n’avez même pas besoin de faire quoi que ce soit, car par défaut, div a la height et la width comme auto, mais si ce n’est pas votre cas, appliquer l’affichage en inline-block va fonctionner pour vous … regardez le code que je crée pour vous et c’est ce que vous cherchez:

     div { display: inline-block; } 
     
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ulsortingces feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh. Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ulsortingces feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.

    Vous pouvez le faire simplement en utilisant display: inline; (ou white-space: nowrap; ).

    J’espère que vous trouvez ça utile.

     
    this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)

    Je sais que les gens n’aiment pas les tableaux parfois, mais je dois vous dire que j’ai essayé les hacks en ligne CSS et qu’ils fonctionnaient plutôt dans certaines divisions, mais pas dans d’autres, donc c’était vraiment plus facile une table … et … elle peut avoir ou non la propriété inline et la table est celle qui va contenir la largeur totale du contenu. =)

    Vous pouvez utiliser inline-block en inline-block comme @ user473598, mais méfiez-vous des navigateurs plus anciens.

     /* Your're working with */ display: inline-block; /* For IE 7 */ zoom: 1; *display: inline; /* For Mozilla Firefox < 3.0 */ display:-moz-inline-stack; 

    Mozilla ne supporte pas du tout le bloc en ligne, mais ils ont -moz-inline-stack qui est à peu près le même

    Un atsortingbut d'affichage inter-navigateur autour inline-block : https://css-sortingcks.com/snippets/css/cross-browser-inline-block/

    Vous pouvez voir quelques tests avec cet atsortingbut dans: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

    Une démo de travail est ici-

     .floating-box { display:-moz-inline-stack; display: inline-block; width: fit-content; height: fit-content; width: 150px; height: 75px; margin: 10px; border: 3px solid #73AD21; } 
     

    The Way is using inline-block

    Supporting elements are also added in CSS.
    Floating box
    Floating box
    Floating box
    Floating box
    Floating box
    Floating box
    Floating box
    Floating box

    Ma solution CSS3 flexbox en deux versions: celle du haut se comporte comme une travée et celle du bas se comporte comme une div, prenant toute la largeur à l’aide d’un wrapper. Leurs classes sont respectivement “top”, “bottom” et “bottomwrapper”.

     body { font-family: sans-serif; } .top { display: -webkit-inline-flex; display: inline-flex; } .top, .bottom { background-color: #3F3; border: 2px solid #FA6; } /* bottomwrapper will take the rest of the width */ .bottomwrapper { display: -webkit-flex; display: flex; } table { border-collapse: collapse; } table, th, td { width: 280px; border: 1px solid #666; } th { background-color: #282; color: #FFF; } td { color: #444; } th, td { padding: 0 4px 0 4px; } 
     Is this 
    OS Version
    OpenBSD 5.7
    Windows Please upgrade to 10!
    what you are looking for?
    Or may be...
    OS Version
    OpenBSD 5.7
    Windows Please upgrade to 10!
    this is what you are looking for.
     
    // HTML elements

    Cela fera que div div parent la même largeur que l’élément.

    Essayez l’ display: inline-block; . Pour qu’il soit compatible avec tous les navigateurs, veuillez utiliser le code css ci-dessous.

     div { display: inline-block; display:-moz-inline-stack; zoom:1; *display:inline; border-style: solid; border-color: #0000ff; } 
     
    Column1 Column2 Column3

    Falsifier avec Firebug J’ai trouvé la valeur de la propriété -moz-fit-content qui correspond exactement à la demande de l’OP et pourrait être utilisée comme suit:

     width: -moz-fit-content; 

    Bien que cela ne fonctionne que sur Firefox, je n’ai pas trouvé d’équivalent pour d’autres navigateurs tels que Chrome.

    Il suffit de mettre un style dans votre fichier CSS

    div {width: fit-content; }

    J’ai résolu un problème similaire (où je ne voulais pas utiliser display: inline-block car l’élément était centré) en ajoutant une balise span dans la balise div et en déplaçant la mise en forme CSS de la balise div externe vers la nouvelle étiquette interne span tag. Il suffit de lancer ceci comme une autre idée alternative si display: inline block n’est pas une réponse appropriée pour vous.

    Cela a été mentionné dans les commentaires et est difficile à trouver dans l’une des réponses pour:

    Si vous utilisez display: flex pour une raison quelconque, vous pouvez utiliser à la place:

    affichage: inline-flex

    Ceci est également largement supporté par les navigateurs.

     div{ width:auto; height:auto; } 

    Si vous avez des lignes de démarcation de conteneurs, après des heures à chercher une bonne solution CSS et à en trouver aucune, j’utilise maintenant jQuery à la place:

     $('button').click(function(){ $('nav ul').each(function(){ $parent = $(this).parent(); $parent.width( $(this).width() ); }); }); 
     nav { display: inline-block; text-align: left; /* doesn't do anything, unlike some might guess */ } ul { display: inline; } /* needed style */ ul { padding: 0; } body { width: 420px; } /* just style */ body { background: #ddd; margin: 1em auto; } button { display: block; } nav { background: #bbb; margin: 1rem auto; padding: 0.5rem; } li { display: inline-block; width: 40px; height: 20px; border: solid thin #777; margin: 4px; background: #999; text-align: center; } 
         

    Nous pouvons utiliser l’une des deux manières sur l’élément div :

     display: table; 

    ou,

     display: inline-block; 

    Je préfère utiliser display: table; , car il gère tous les espaces supplémentaires. While display: inline-block nécessite un espace supplémentaire.

    Révisé (fonctionne si vous avez plusieurs enfants): vous pouvez utiliser jQuery (regardez le lien JSFiddle)

     var d= $('div'); var w; d.children().each(function(){ w = w + $(this).outerWidth(); d.css('width', w + 'px') }); 

    N’oubliez pas d’inclure le jQuery …

    Voir le JSfiddle ici

    J’ai essayé div.classname{display:table-cell;} et ça a marché!

    Je voudrais juste définir le padding: -whateverYouWantpx;