Comment puis-je faire un div pas plus grand que son contenu?

J'ai une disposition similaire à:

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

Je souhaiterais que le divne se développe que le plus large possible table.

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

Vous voulez un élément de bloc qui a ce que CSS appelle une largeur de rétrécissement pour s'adapter et la spécification ne fournit pas un moyen béni pour obtenir une telle chose. En CSS2, rétrécir pour s'adapter n'est pas un objectif, mais signifie faire face à une situation où le navigateur "doit" obtenir une largeur hors de l'air. Ces situations sont les suivantes:

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

lorsqu'aucune largeur n'est spécifiée. J'ai entendu dire qu'ils pensaient ajouter ce que vous voulez dans CSS3. Pour l'instant, contentez-vous de l'une des options 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. Rétrécir signifie mettre en forme au moins deux fois: vous ne pouvez pas commencer à mettre en forme un élément tant que vous ne connaissez pas sa largeur, et vous ne pouvez pas calculer la largeur sans parcourir tout le contenu. De plus, on n'a pas besoin d'un élément rétractable pour s'adapter aussi souvent qu'on le pense. Pourquoi avez-vous besoin de div supplémentaires autour de votre table? Peut-être que la légende de table est tout ce dont vous avez besoin.

Je pense qu'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 divdans un autre div(si vous voulez conserver le comportement de blocage):

HTML:

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

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 */
}

Bonus: vous pouvez désormais facilement centrer cette nouveauté #elementen ajoutant simplement margin: 0 auto.

Vous pouvez essayer fit-content(CSS3):

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

• Prise en charge du navigateur
• spécification

Ce qui fonctionne pour moi, c'est:

display: table;

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

Il y a deux meilleures solutions

1. display: inline-block;

   OU

2. display: table;

Sur ces deux, display:table;c'est mieux, car display: inline-block;ajoute une marge supplémentaire.

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

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

Foo Hack - Prise en charge de plusieurs navigateurs pour le style de bloc en ligne (2007-11-19) .

Ne sachant pas dans quel contexte cela apparaîtra, mais je crois que la propriété de style CSS floatnon plus leftou rightaura cet effet. D'un autre côté, cela aura également d'autres effets secondaires, comme permettre au texte de flotter autour de lui.

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

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

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

width: intrinsic;

malheureusement, IE est en retard, donc il ne le prend pas encore en charge

En savoir plus: Module de dimensionnement intrinsèque et extrinsèque CSS niveau 3 et puis-je utiliser? : Dimensionnement intrinsèque et extrinsèque .

Pour l'instant, vous devez être satisfait <span>ou <div>réglé sur

display: inline-block;

Une solution compatible CSS2 consiste à utiliser:

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

Vous pouvez également faire flotter votre div, ce qui le forcera le plus petit possible, mais vous devrez utiliser un clearfix si quelque chose à l'intérieur de votre div flotte:

.my-div
{
    float: left;
}

width:1px;
white-space: nowrap;

fonctionne bien pour moi :)

OK, dans de nombreux cas, vous n'avez même pas besoin de faire quoi que ce soit comme div par défaut heightet widthcomme auto, mais si ce n'est pas votre cas, l'application d' inline-blockaffichage fonctionnera pour vous ... regardez le code que je crée pour vous et c'est fait ce que tu recherches:

div {
  display: inline-block;
}

<div>
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
      <td>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.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
    </tr>
  </table>
</div>

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

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

div {
    display: inline-flex;
}

Ceci est également largement pris en charge par les navigateurs.

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

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

Vous pouvez utiliser en inline-blocktant que @ user473598, mais méfiez-vous des anciens navigateurs.

/* 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 prend pas du tout en charge le bloc en ligne, mais ils ont -moz-inline-stackce qui est à peu près le même

Un inline-blockattribut d'affichage croisé autour du navigateur : https://css-tricks.com/snippets/css/cross-browser-inline-block/

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

Mettez simplement un style dans votre fichier CSS

div { 
    width: fit-content; 
}

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <div id="content_lalala">
                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 =)
            </div>
        </td>
    </tr>
</table>

Je sais que les gens n'aiment pas les tables parfois, mais je dois vous dire que j'ai essayé les hacks en ligne css, et ils ont un peu fonctionné dans certaines divisions, mais dans d'autres non, donc, il était vraiment plus facile d'inclure le div en expansion dans un tableau ... et ... il peut avoir ou non la propriété inline et le tableau est toujours celui qui va contenir la largeur totale du contenu. =)

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;  
}

<h2>The Way is using inline-block</h2>

Supporting elements are also added in CSS.

<div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
</div>

Ma solution flexbox CSS3 en deux versions: celle du haut se comporte comme une travée et celle du bas se comporte comme un 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
<div class="top">
	<table>
        <tr>
            <th>OS</th>
            <th>Version</th> 
        </tr>
        <tr>
            <td>OpenBSD</td>
            <td>5.7</td> 
        </tr>
        <tr>
            <td>Windows</td>
            <td>Please upgrade to 10!</td> 
        </tr>
    </table>
</div>
what you are looking for?
<br>
Or may be...
<div class="bottomwrapper">
    <div class="bottom">
    	<table>
            <tr>
                <th>OS</th>
                <th>Version</th> 
            </tr>
            <tr>
                <td>OpenBSD</td>
                <td>5.7</td> 
            </tr>
            <tr>
                <td>Windows</td>
                <td>Please upgrade to 10!</td> 
            </tr>
        </table>
    </div>
</div>
this is what you are looking for.

<div class="parentDiv" style="display:inline-block">
    // HTML elements
</div>

Cela rendra la largeur de div parent identique à la plus grande largeur d'élément.

Essayez display: inline-block;. Pour qu'il soit compatible avec plusieurs 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;
}

<div>
  <table>
    <tr>
      <td>Column1</td>
      <td>Column2</td>
      <td>Column3</td>
    </tr>
  </table>
</div>

En manipulant Firebug, j'ai trouvé la valeur de la propriété -moz-fit-contentqui fait exactement ce que l'OP voulait et pourrait être utilisée comme suit:

width: -moz-fit-content;

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

Vous pouvez essayer ce code. Suivez le code dans la section CSS.

div {
  display: inline-block;
  padding: 2vw;
  background-color: green;
}

table {
  width: 70vw;
  background-color: white;
}

<div>
    <table border="colapsed">
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>

    </table>
</div>

J'ai résolu un problème similaire (où je ne voulais pas utiliser display: inline-blockcar l'élément était centré) en ajoutant une spanbalise à l'intérieur de la divbalise et en déplaçant la mise en forme CSS de la divbalise extérieure vers la nouvelle spanbalise intérieure . Il suffit de jeter cela là-bas comme une autre idée alternative si ce display: inline blockn'est pas une réponse appropriée pour vous.

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

display: table;

ou,

display: inline-block; 

Je préfère utiliser display: table;, car il gère, tous les espaces supplémentaires seuls. Bien qu'il ait display: inline-blockbesoin d'un peu d'espace supplémentaire.

div{
  width:auto;
  height:auto;
}

Si vous avez des conteneurs qui cassent des lignes, après des heures à chercher une bonne solution CSS et à n'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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>fix</button>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
  </ul>
</nav>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
    <li>1</li>
    <li>5</li>
    <li>9</li>
    <li>2</li>
    <li>6</li>
    <li>5</li>
    <li>3</li>
    <li>5</li>
  </ul>
</nav>

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é!