Comment rendre div pas plus grand que son contenu?

j'ai une disposition similaire à:

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

je voudrais que le div ne s'étende qu'à la largeur de mon table .

1718
demandé sur nbro 2009-01-16 19:03:07
la source

30 ответов

la solution est de régler votre div à display: inline-block .

2069
répondu user473598 2017-04-11 11:14:57
la source

vous voulez un élément de bloc qui a ce que CSS appelle largeur rétrécissement-ajustement et la spécification ne fournit pas une façon bénie d'obtenir une telle chose. Dans CSS2, le rétrécissement à l'ajustement n'est pas un objectif, mais un moyen de faire face à une situation où le navigateur "doit" obtenir une largeur hors de l'air. Ces situations sont les suivantes:

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

lorsqu'il n'y a pas de largeur spécifiée. J'ai entendu dire qu'ils pensent à ajouter ce que vous voulez en CSS3. Pour l'instant, faire avec l'un des ci-dessus.

la décision de ne pas exposer directement la caractéristique peut sembler étrange, mais il y a une bonne raison. Il est cher. Shrink-to-fit signifie 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 le contenu entier. De Plus, on n'a pas besoin rétrécir l'élément adapté aussi souvent qu'on le croit. Pourquoi avez-vous besoin de plus de div autour de votre table? Peut-être que la légende de la table est tout ce dont tu as besoin.

311
répondu buti-oxa 2012-08-08 09:46:55
la source

je pense que l'utilisation d'

display: inline-block;

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


une autre solution serait d'envelopper votre div dans un autre div (si vous voulez maintenir le comportement de bloc):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}
200
répondu mbillard 2013-07-25 23:10:47
la source

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

je recommande ceci:

#element {
    display: table; /* IE8+ and all other modern browsers */
}
179
répondu Salman Abbas 2013-07-25 19:48:54
la source
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

Foo Hack – Cross Browser Support for inline-block Stylling (2007-11-19) .

82
répondu kape123 2013-07-25 21:33:40
la source

ce qui fonctionne pour moi est:

display: table;

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

74
répondu Sony Santos 2014-01-02 14:39:39
la source

vous pouvez essayer fit-content (CSS3):

div {
  width: fit-content; 
  /* To adjust the height as well */ 
  height: fit-content;
}
63
répondu Vitalii Fedorenko 2013-09-28 16:34:35
la source

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 marge négative méthode pour résoudre l'espace supplémentaire

54
répondu Shuvo Habib 2016-09-19 13:48:15
la source

la réponse à votre question Est 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 supporte pas encore

pour en savoir plus: CSS Intrinsic & Extrinsic Sizing Module Niveau 3 et puis-je utiliser? : Encollage Intrinsèque Et Extrinsèque .

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

display: inline-block;
41
répondu trojan 2014-01-02 14:37:25
la source

ne sachant pas dans quel contexte cela va apparaître, mais je crois que la propriété de style CSS float soit left ou right aura cet effet. D'un autre côté, cela aura d'autres effets secondaires, comme permettre au texte de flotter autour de lui.

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

36
répondu falstro 2013-03-19 11:47:32
la source
width:1px;
white-space: nowrap;

fonctionne très bien pour moi :)

32
répondu Daft Wullie 2011-08-26 14:04:38
la source

une solution compatible CSS2 est à utiliser:

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

vous pouvez également faire flotter votre div qui le forcera aussi petit que possible, mais vous aurez besoin d'utiliser un clearfix si quelque chose à l'intérieur de votre div est flottant:

.my-div
{
    float: left;
}
29
répondu Soviut 2009-01-16 19:13:07
la source

OK, dans de nombreux cas, vous n'avez même pas besoin de faire quoi que ce soit car par défaut div a height et width comme auto, mais si ce n'est pas votre cas, l'application inline-block display va fonctionner pour vous... regardez le code que je crée pour vous et il fait ce que vous cherchez:

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>
21
répondu Alireza 2017-10-21 16:25:19
la source

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

j'espère que vous trouverez cela utile.

19
répondu miksiii 2014-10-05 13:36:06
la source

vous pouvez utiliser 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 les blocages en ligne, mais ils ont -moz-inline-stack qui est à peu près le même

certains navigateurs croisés autour de l'attribut d'affichage inline-block : https://css-tricks.com/snippets/css/cross-browser-inline-block/

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

18
répondu RPichioli 2017-09-15 22:29:15
la source
<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, j'ai essayé les hacks inline css, et ils ont un peu travaillé dans certaines divs mais dans d'autres ne l'ont pas fait, donc, il était vraiment plus facile de mettre la div expansion dans une table...et...il peut avoir ou non la propriété inline et toujours la table est celle qui va tenir la largeur totale du contenu. = )

17
répondu Edward 2011-08-03 21:06:34
la source

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>
15
répondu Abrar Jahin 2016-03-23 12:45:09
la source

ma solution flexbox CSS3 en deux saveurs: celle du haut se comporte comme une portée et celle du bas comme une div, en prenant toute la largeur à l'aide d'un papier d'emballage. 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.
13
répondu Lloyd Dominic 2016-12-31 10:14:14
la source
<div class="parentDiv" style="display:inline-block">
    // HTML elements
</div>

cela rendra la largeur du div parent identique à la largeur du plus grand élément.

12
répondu Jaimin Dave 2017-02-22 14:04:51
la source

Essayer display: inline-block; . Pour qu'il soit compatible avec les navigateurs croisés, 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>
12
répondu James 2017-09-07 02:13:58
la source

Tripotage autour de Firebug j'ai trouvé la valeur de la propriété -moz-fit-content qui fait exactement ce que L'OP voulait et pourrait être utilisé comme suit:

width: -moz-fit-content;

bien qu'il ne fonctionne que sur Firefox, Je ne pouvais pas trouver d'équivalent pour les autres navigateurs tels que Chrome.

10
répondu Hamed Momeni 2016-10-10 08:10:21
la source

mettez juste un style dans votre fichier CSS

div { 
    width: fit-content; 
}
10
répondu Hamza 2018-10-12 22:13:40
la source

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

si vous utilisez display: flex pour quelque raison que ce soit, vous pouvez à la place utiliser:

div {
    display: inline-flex;
}

Ceci est aussi largement supporté par les navigateurs.

8
répondu youngrrrr 2018-10-12 23:20:11
la source

j'ai résolu un problème similaire (où je ne voulais pas utiliser display: inline-block parce que l'article était centré) en ajoutant une étiquette span à l'intérieur de l'étiquette div , et en déplaçant le formatage CSS de l'étiquette extérieure div à la nouvelle étiquette intérieure span . Il suffit de jeter cela là-bas comme une autre idée alternative si display: inline block n'est pas une réponse appropriée pour vous.

7
répondu Jessica Brown 2013-03-19 11:46:26
la source
div{
  width:auto;
  height:auto;
}
6
répondu AJchandu 2016-12-07 11:47:29
la source

si vous avez des conteneurs cassant des lignes, après des heures à la recherche d'une bonne solution CSS et de 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>
5
répondu cregox 2017-05-23 14:47:22
la source

nous pouvons utiliser n'importe laquelle des deux façons sur le 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 sur son propre. Alors que display: inline-block a besoin de plus de place.

5
répondu Novice 2016-09-30 08:00:55
la source

révisé (fonctionne si vous avez plusieurs enfants): Vous pouvez utiliser jQuery (voir 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 jQuery...

voir le JSfiddle ici

5
répondu Ogdila 2016-09-30 16:06:17
la source

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

4
répondu UnLoCo 2013-10-21 05:41:34
la source

je voudrais juste mettre padding: -whateverYouWantpx;

4
répondu NathanielSantley 2016-10-21 20:22:09
la source

Autres questions sur html css width