Comment faire en sorte que div ne soit pas plus gros que son contenu?
J'ai une mise en page semblable à:
<div>
<table>
</table>
</div>
Je souhaiterais que la div ne s'étende qu'à la largeur de mon table.
La solution consiste à régler votre div sur display: inline-block.
Vous voulez un élément de bloc ayant ce que CSS appelle une largeur réduite et la spécification ne fournit pas un moyen béni d'obtenir une telle chose. Dans CSS2, réduire au maximum l’ajustement n’est pas un objectif, mais un moyen de gérer une situation dans laquelle le navigateur "doit" faire son chemin. Ces situations sont:
- float
- élément absolument positionné
- élément de bloc en ligne
- élément de table
quand il n'y a pas de largeur spécifiée. J'ai entendu dire qu'ils pensaient ajouter ce que vous voulez dans CSS3. Pour l'instant, faites avec l'un des éléments ci-dessus.
La décision de ne pas exposer directement la fonctionnalité peut sembler étrange, mais il y a une bonne raison. Il est coûteux. Réduire au format signifie formater 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 parcourir tout le contenu. De plus, on n'a pas besoin d'un élément thermorétractable aussi souvent qu'on pourrait le penser. Pourquoi avez-vous besoin d'un div supplémentaire autour de votre table? Peut-être que la légende du tableau 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’envelopper votre div dans un autre div (si vous souhaitez conserver le comportement du bloc):
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 maintenant aussi facilement centrer cette nouvelle #element en ajoutant simplement margin: 0 auto.
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
Foo Hack - Prise en charge de plusieurs navigateurs pour le style inline-block (2007-11-19) .
Ce qui fonctionne pour moi c'est:
display: table;
dans le div. (Testé sur Firefox et Google Chrome).
Vous pouvez essayer fit-content (CSS3):
_div {
width: fit-content;
/* To adjust the height as well */
height: fit-content;
}
_Il y a deux meilleures solutions
display: inline-block;OR
display: table;
Parmi ces deux display:table; est meilleur, car display: inline-block; ajoute une marge supplémentaire.
Pour display:inline-block;, vous pouvez utiliser la méthode de la marge négative pour fixer l’espace supplémentaire.
La réponse à votre question réside dans l'avenir, mon ami ...
à savoir "intrinsèque" arrive avec la dernière mise à jour de CSS3
width: intrinsic;
malheureusement C'EST-À-DIRE est en retard, donc il ne le supporte pas encore
Pour en savoir plus: module de dimensionnement CSS intrinsèque et extrinsèque niveau et puis-je utiliser? : dimensionnement intrinsèque et extrinsèque .
Pour l'instant, vous devez être satisfait avec <span> ou <div> réglé sur
display: inline-block;
Ne sachant pas dans quel contexte cela va apparaître, mais je pense que la propriété de style CSS float soit left ou right aura cet effet. D'autre part, cela aura également 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 je ne peux actuellement pas le tester moi-même.
width:1px;
white-space: nowrap;
fonctionne bien pour moi :)
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;
}
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, appliquez inline-block l'écran va travailler pour vous ... regardez le code que je crée pour vous et faites 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>Cela a été mentionné dans les commentaires et est difficile à trouver dans l'une des réponses, donc:
Si vous utilisez display: flex pour une raison quelconque, vous pouvez utiliser à la place:
div {
display: inline-flex;
}
Vous pouvez le faire simplement en utilisant display: inline; (ou white-space: nowrap;).
J'espère que vous trouvez ça utile.
<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 de temps en temps, mais je dois vous dire que j'ai essayé les hacks inline en CSS, et qu'ils ont un peu fonctionné dans certains divs, mais que d'autres non une table ... et ... elle peut avoir ou non la propriété inline et pourtant la table est celle qui va contenir la largeur totale du contenu. =)
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 le bloc inline, 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/
Il suffit de mettre un style dans votre fichier CSS
div {
width: fit-content;
}
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 CSS3 flexbox en deux versions: celle du dessus se comporte comme une étendue et celle du bas, 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
<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.Essayez 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;
}<div>
<table>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
</tr>
</table>
</div><div class="parentDiv" style="display:inline-block">
// HTML elements
</div>
Cela rendra la largeur du parent parent identique à la largeur de l'élément le plus grand.
En trafiquant avec Firebug, j'ai trouvé la valeur de la propriété -moz-fit-content qui fait exactement ce que l'OP voulait et qui pourrait être utilisé 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.
Nous pouvons utiliser n'importe laquelle 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 seul tous les espaces supplémentaires. Alors que display: inline-block nécessite un peu d'espace supplémentaire.
J'ai résolu un problème similaire (où je ne voulais pas utiliser display: inline-block parce que l'élément était centré) en ajoutant une balise span à l'intérieur de la balise div et en déplaçant la mise en forme CSS de la balise div extérieure à la nouvelle balise span intérieure. Jeter ceci simplement comme une autre idée si display: inline block ne vous convient pas.
div{
width:auto;
height:auto;
}
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 ...
Si vous avez des conteneurs qui cassent des lignes, recherchez après les heures normales une solution CSS et n'en trouvez 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>Je voudrais juste mettre padding: -whateverYouWantpx;
J'ai essayé div.classname{display:table-cell;} et ça a fonctionné!
Vous pouvez utiliser display: flex pour l'élément parent
#parentElement {
display: flex;
flex-direction: column;
align-items: flex-start;
}
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>Et si nous définissons une variable globale et l'utilisons pour les deux.
:root {
--table-width: 400px;
}
.container{
width:var(--table-width);
border: 1px solid black; // easy visualization
}
.inner-table {
width:var(--table-width);
border: 1px solid red; // easy visualization
}<div class="container">
<table class="inner-table">
<tr>
<td>abc</td>
</tr>
</table>
</div>J'ai un span à l'intérieur d'un div et le réglage de margin: auto dans le conteneur div a fonctionné pour moi.
Personnellement, je fais simplement ceci:
Code HTML:
<div>
<table>
</table>
</div>
Code CSS:
div {
display: inline;
}
Si vous appliquez un float sur votre div, cela fonctionne aussi, mais vous devez évidemment appliquer une règle "effacer les deux" CSS au prochain élément HTML.
Simplement
<div style="display: inline;">
<table>
</table>
</div>