¿Cómo puedo hacer que un div no sea más grande que su contenido?

Tengo un diseño similar a:

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

Me gustaria para el div para expandirse solo a tan ancho como mi table se convierte.

preguntado el 16 de enero de 09 a las 14:01

el efecto se llama "empaquetado" y, como se respondió, hay un par de formas de hacerlo (flotante, en línea, ancho mínimo / máximo), todas las cuales tienen efectos secundarios para elegir:

Ninguna de las siguientes respuestas funcionó para mí, excepto: display: table -O- height: fit-content !!! -

30 Respuestas

La solución es configurar su div a display: inline-block.

Respondido 11 Abr '17, 09:04

@ leif81 Puede utilizar un span o un div or ul o cualquier otra cosa, la parte importante es que para el contenedor que le gustaría tener un ancho mínimo, tenga la propiedad CSS display: inline-block - miahelf

si alguien se pregunta: entonces se puede centrar el elemento principal de la tabla configurando "text-align: center" en su elemento principal y "text-align: left" en él (p. ej. ... ) - bernstein

No funciona en Chrome para mí con span, pero funciona con espacios en blanco: nowrap; - Albanx

Tenga en cuenta que una vez que tenga display: inline-block propiedad establece el margin: 0 auto; no funcionará como se esperaba. En ese caso, si el contenedor padre tiene text-align: center; entonces el inline-block El elemento estará centrado horizontalmente. - Savas Vedova

inline-block NO funcionó para mí, pero inline-flex HIZO. - mareobalsa

Desea un elemento de bloque que tenga lo que CSS llama ancho de encogimiento para ajustar y la especificación no proporciona una forma bendita de obtener tal cosa. En CSS2, encoger para ajustar no es un objetivo, sino que significa lidiar con una situación en la que el navegador "tiene que" obtener un ancho de la nada. Esas situaciones son:

  • flotar
  • elemento absolutamente posicionado
  • elemento de bloque en línea
  • elemento de tabla

cuando no hay ancho especificado. Escuché que piensan en agregar lo que quieras en CSS3. Por ahora, hazte con uno de los anteriores.

La decisión de no exponer la función directamente puede parecer extraña, pero hay una buena razón. Es caro. Reducir para ajustar significa formatear al menos dos veces: no puede comenzar a formatear un elemento hasta que sepa su ancho, y no puede calcular el ancho sin pasar por todo el contenido. Además, no se necesita un elemento encogible para encajar con tanta frecuencia como podría pensarse. ¿Por qué necesitas div extra alrededor de tu mesa? Quizás el título de la tabla sea todo lo que necesita.

Respondido 08 ago 12, 06:08

yo diría inline-block está diseñado exactamente para esto y resuelve el problema a la perfección. - miahelf

Creo que están agregando css4 y sería content-box, max-content, min-content, available, fit-content, auto - Muhammad Umer

El nuevo fit-content palabra clave (no existía cuando se escribió esta respuesta por primera vez, y aún no totalmente compatible) le permite aplicar explícitamente el tamaño "encoger para ajustar" a un elemento, eliminando la necesidad de cualquiera de los trucos sugeridos aquí si tiene la suerte de apuntar solo a navegadores con soporte. +1 no obstante; ¡estos siguen siendo útiles por ahora! - marca amery

float ¡Hice lo que tenía que hacer! - nipunasudha

Creo que usando

display: inline-block;

funcionaría, sin embargo, no estoy seguro de la compatibilidad del navegador.

Otra solución sería envolver tu div en otro div (si desea mantener el comportamiento de bloqueo):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

Respondido 25 Jul 13, 20:07

Para responder a la pregunta de compatibilidad del navegador: esto no funcionará con IE7 / 8 en elementos DIV. Tienes que usar elementos SPAN. - matt brock

@feeela - Siempre pongo un * delante del zoom, p. ej. *display: inline; *zoom: 1;. No he probado esta situación en particular, pero siempre he encontrado en el pasado que el truco hasLayout solo es necesario para IE7 o IE8 en modo IE7 (¡o IE8 en peculiaridades!). - robogato

@robocat Sí, de hecho es una solución para tener inline-block habilitado en IE 7. - Feeela

@feela - ¡tu comentario no tiene sentido para mí! Estaba sugiriendo poner * delante del zoom también Es decir * zoom: 1; - robogato

Explique por qué funciona su solución de bloque en línea. - HelloWorldNoMás

display: inline-block agrega un margen adicional a su elemento.

Recomendaría esto:

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

Bonificación: Ahora también puede centrar fácilmente ese nuevo y elegante #element solo agregando margin: 0 auto.

Respondido el 17 de diciembre de 18 a las 17:12

+1: esta es la mejor y más limpia solución para los navegadores modernos que también permite centrar el elemento. Un comentario condicional con position: absolute es necesario para <IE8. - uınbɐɥs

Especificación display: inline-block no agrega márgenes. Pero CSS maneja los espacios en blanco para que se muestren entre los elementos en línea. - Feeela

Explique por qué su solución de display: table funciona. - HelloWorldNoMás

inline-block hace que el elemento sea imposible de colocar en su padre (por ejemplo, si hay un text-align: center no puede hacer que se pegue a la izquierda) display: table is perfect :) - florianb

Este es el camino a seguir si tiene position: absolute - m4heshd

Puedes probar fit-content (CSS3): 

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

Respondido el 28 de Septiembre de 13 a las 13:09

@BartlomiejSkwira ¿Algún sustituto que trabaje en IE o Eclipse? otra solución como inline-block no me funciona .. \ - DAVIDBALAS1

Esto tiene demasiado sentido, por supuesto que carece de apoyo. - Sava B.

fit-content no parece funcionar para mí pero sus primos max-content y min-content trabaja bien. - Krubo

Soporte de navegador deficiente para esto, es mucho mejor evitarlo y usarlo de manera más convencional inline-block enfoque si desea confiabilidad en todos los navegadores. - plong0

Para mí "width: -moz-fit-content; width: fit-content;" trabajó. De lo contrario, no funcionó en Firefox (en noviembre de 2020). - s. cierva

Hay dos mejores soluciones

  1. display: inline-block;

    OR

  2. display: table;

De estos dos display:table; es mejor, porque display: inline-block; agrega un margen extra.

Si display:inline-block; puede utilizar el método de margen negativo para arreglar el espacio extra

Respondido 15 Abr '19, 03:04

¿Te importaría explicar por qué? display:table ¿es mejor? - Nathaniel Ford

Para la visualización: bloque en línea, debe utilizar el método de margen negativo para corregir el espacio adicional. - Shuvo Habib

@NathanielFord, display:table deja el elemento en el contexto de formato de Bloque, por lo que puede controlar su posición con márgenes, etc., como de costumbre. display:-inline-*, por otro lado, coloca el elemento en el contexto de formato Inline, lo que hace que el navegador cree el contenedor de bloque anónimo a su alrededor, que contiene el cuadro de línea con la configuración de fuente / altura de línea heredada, e inserta el bloque en ese cuadro de línea (alineando verticalmente por línea de base por defecto). Esto implica más "magia" y, por tanto, posibles sorpresas. - Ilya Streltsyn

Lo que me funciona es:

display: table;

en el capítulo respecto a la div. (Probado en Firefox y Google Chrome).

Respondido el 02 de enero de 14 a las 10:01

Sí, especialmente si necesita centrar con margen: automático. Ese caso inline-block no es la solución. - Zsolt Szatmari

También tenga en cuenta que si desea que el relleno funcione dentro de este elemento, debe configurar border-collapse: separate; estilo. Es predeterminado en muchos navegadores, pero a menudo marcos CSS como bootstrap restablecen su valor a collapse. - Ruslan Stelmachenko

Probado en MSIE 6 en un teléfono con Windows Mobile 6.5 fabricado en 2009: se degrada con gracia a un div de ancho completo (lo que es poco probable que sea un problema en un teléfono). Si alguien está usando una versión de Internet Explorer menor que 8 en un escritorio, está usando un sistema operativo no compatible (IE6 vino con XP, IE7 vino con Vista); Los redirigiría a una página que les decía que se actualizaran a GNU / Linux si quieren un uso seguro y continuo de Internet en esa máquina. - Silas S. Marrón 

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

Foo Hack - Compatibilidad con varios navegadores para el estilo de bloques en línea (2007-11-19).

Respondido 25 Jul 13, 18:07

Cualquiera que tenga este problema debe agregar todos estos estilos. Firefox agregó márgenes cuando no se usa -moz-inline-stack - Justin

Sin saber en qué contexto aparecerá esto, pero creo que la propiedad de estilo CSS float ya sea left or right tendrá este efecto. Por otro lado, también tendrá otros efectos secundarios, como permitir que el texto flote a su alrededor.

Sin embargo, corrígeme si me equivoco, no estoy 100% seguro y actualmente no puedo probarlo yo mismo.

respondido 19 mar '13, 07:03

Sí, en CSS 2.1. (CSS2.0 haría el flotador de ancho completo, pero solo IE5 / Mac realmente lo hace). Las tablas y los flotantes son los únicos tipos de visualización que pueden encogerse para ajustarse a su contenido. - bobince

La respuesta a tu pregunta está en el futuro amigo mío ...

es decir, "intrínseco" viene con la última actualización de CSS3

width: intrinsic;

Desafortunadamente IE está atrasado, por lo que aún no lo admite

Más sobre esto: Módulo de dimensionamiento intrínseco y extrínseco CSS, nivel 3 y ¿Puedo usar?: Dimensionamiento intrínseco y extrínseco.

Por ahora tienes que estar satisfecho con <span> or <div> establecido en 

display: inline-block;

Respondido el 02 de enero de 14 a las 10:01

intrinsic ya que un valor no es estándar. En realidad es width: max-content. Ver el Página MDN sobre eso o el borrador ya vinculado. - maria muerta 

width:1px;
white-space: nowrap;

funciona bien para mí :)

Respondido 26 ago 11, 11:08

Pero, de nuevo, mi caso era texto dentro de un div, y no una tabla como el OP. - Rui Marqués

para el control deslizante de la interfaz de usuario de jquery, esto es excelente porque no es necesario establecer el ancho del elemento de contenido: CaféJunky

width: auto; white-space: nowrap; hizo la cosa por mí. - Antti Tankanen

Una solución compatible con CSS2 es utilizar:

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

También puede hacer flotar su div, lo que lo forzará lo más pequeño posible, pero deberá usar un arreglo claro si algo dentro de su div está flotando:

.my-div
{
    float: left;
}

Respondido el 16 de enero de 09 a las 16:01

Debería. ¿Qué tipo de documento estás usando? - soviético

OK, en muchos casos, incluso no es necesario hacer nada, ya que, de forma predeterminada, div tiene height y width como auto, pero si no es tu caso, aplicando inline-block la pantalla funcionará para ti ... mira el código que creo para ti y hace lo que buscas:

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>

Respondido el 14 de diciembre de 18 a las 18:12

Esto se ha mencionado en los comentarios y es difícil de encontrar en una de las respuestas, por lo que:

Si está utilizando display: flex por el motivo que sea, puede utilizar en su lugar:

div {
    display: inline-flex;
}

Esto también es ampliamente compatible con todos los navegadores.

Respondido 12 Oct 18, 21:10

Tenga en cuenta que esto no funcionará si su div elemento está dentro de un contenedor que es a la vez display: flex y flex-flow: column. Esto se debe a que el valor predeterminado para align-items is stretch. Debes configurar align-items a algo que no sea stretch en esta situación, para que esta solución funcione. - caleb jay

Puedes usar inline-block como @ user473598, pero tenga cuidado con los navegadores más antiguos.

/* Your're working with */
display: inline-block;

/* For IE 7 */
zoom: 1;
*display: inline;

/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;

Mozilla no admite el bloqueo en línea en absoluto, pero tiene -moz-inline-stack que es más o menos lo mismo

Algunos navegadores cruzados alrededor inline-block atributo de visualización: https://css-tricks.com/snippets/css/cross-browser-inline-block/

Puedes ver algunas pruebas con este atributo en: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Respondido el 15 de Septiembre de 17 a las 20:09

¿De qué estás hablando? Compatible con Mozilla Firefox inline-block desde 3.0 (2008). Fuente: desarrollador.mozilla.org/en-US/docs/Web/CSS/… - chazy chaz

Simplemente ponga un estilo en su archivo CSS

div { 
    width: fit-content; 
}

Respondido 12 Oct 18, 20:10

No creo que esta sea una opción compatible con varios navegadores. - david rector

Actualmente no funciona en Edge: caniuse.com/#search=fit-content - Molsson

Puedes usar -moz-fit-content para FF, presumiblemente los otros prefijos de proveedores permitirán sus propios ... - Benj

Esto es lo mismo que La respuesta de Vitalii Fedorenko - mfluehr

Puedes hacerlo simplemente usando display: inline; (o white-space: nowrap;).

Espero que encuentres esto útil.

Respondido 05 Oct 14, 10:10

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

Sé que a la gente no le gustan las tablas a veces, pero debo decirte que probé los trucos en línea de CSS y funcionaron un poco en algunos divs, pero en otros no, así que fue más fácil encerrar el div expansivo en una tabla ... y ... puede tener o no la propiedad en línea y aún así la tabla es la que va a contener el ancho total del contenido. =)

Respondido el 28 de junio de 19 a las 19:06

No es la forma "correcta", pero IE6 / 7/8 a menudo simplemente no funciona bien cuando las cosas se complican un poco, así que entiendo totalmente por qué lo harías de esta forma. Tienes mi voto a favor. - craig

Haría esto, pero tengo que rodear cada cuadro de entrada, así que eso es mucho html adicional. - NickSoft

Puedes probar este código. Siga el código en la sección 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>

respondido 19 nov., 19:12

Una demostración funcional está aquí

.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>

respondido 23 mar '16, 09:03

Tratar de usar width: max-content propiedad para ajustar el ancho del div por su tamaño de contenido.

Prueba este ejemplo,

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width:500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  width: max-content;
  margin: auto;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<div class="ex1">This div element has width 500px;</div>
<br>
<div class="ex2">Width by content size</div>

</body>
</html>

Respondido 31 ago 20, 10:08

Mi solución CSS3 flexbox en dos sabores: el de arriba se comporta como un tramo y el de abajo se comporta como un div, tomando todo el ancho con la ayuda de un envoltorio. Sus clases son "top", "bottom" y "bottomwrapper" respectivamente.

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.

Respondido el 31 de diciembre de 16 a las 07:12

felicitaciones por display: inline-flex;. Por cierto, esto funciona sin prefijo para Chrome 62, firefox 57 y safari 11 - Horacio 

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

Esto hará que el ancho div padre sea el mismo que el ancho del elemento más grande.

Respondido 22 Feb 17, 11:02

¿Hay alguna manera de que pueda aplicar esto solo para el tamaño vertical para minimizar y mantener el tamaño horizontal? - duendes

Intente display: inline-block;. Para que sea compatible con varios navegadores, utilice el siguiente código CSS.

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>

Respondido el 07 de Septiembre de 17 a las 00:09

Al manipular Firebug encontré el valor de la propiedad -moz-fit-content que hace exactamente lo que quería el OP y podría usarse de la siguiente manera:

width: -moz-fit-content;

Aunque solo funciona en Firefox, no pude encontrar ningún equivalente para otros navegadores como Chrome.

Respondido 10 Oct 16, 06:10

A partir de enero de 2017, IE (todas las versiones, Edge y móvil incluidos) y Opera Mini no tienen soporte para fit-content. Firefox solo admite ancho. Otros navegadores lo admiten bien. - Gavin

Resolví un problema similar (donde no quería usar display: inline-block porque el elemento estaba centrado) agregando un span etiqueta dentro de la div etiqueta y moviendo el formato CSS desde el exterior div etiqueta al nuevo interior span etiqueta. Simplemente lanzando esto como otra idea alternativa si display: inline block no es una respuesta adecuada para ti.

respondido 19 mar '13, 07:03

Podemos utilizar cualquiera de las dos formas en div elemento: 

display: table;

o,

display: inline-block;

Prefiero usar display: table;, porque maneja, todos los espacios adicionales por sí solo. Tiempo display: inline-block necesita un poco de espacio adicional para arreglar.

Respondido el 30 de Septiembre de 16 a las 06:09

div{
  width:auto;
  height:auto;
}

Respondido el 07 de diciembre de 16 a las 08:12

Esto no funcionará si div contiene elementos en línea (o bloque en línea) y tienen un tamaño de fuente y una altura de línea diferentes que el div en sí. - citasBro

Si tiene contenedores rompiendo líneas, después de horas buscando una buena solución CSS y no encuentra ninguna, Ahora uso jQuery en su lugar:

$('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>

contestado el 23 de mayo de 17 a las 12:05

Esto está visiblemente roto en el fragmento para mí en Chrome; hacer clic en el botón de corrección por segunda vez produce resultados diferentes a hacer clic en él la primera vez. - marca amery

@MarkAmery en mi Mac Acabo de probarlo en Chrome, Safari y Firefox y está todo bien: sin errores visibles, nada en la consola, comportamiento consistente. tal vez sea algo con ventanas ... - Cregox

Revisado (funciona si tienes varios hijos): puedes usar jQuery (mira el enlace JSFiddle)

var d= $('div');
var w;


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

No olvides incluir el jQuery ...

Mira el JSfiddle aquí

Respondido el 30 de Septiembre de 16 a las 14:09

Esto está roto si su div tiene varios hijos; simplemente establece el ancho div al del la primera niño. - marca amery

@MarkAmery En primer lugar, antes de dar un voto negativo, lea atentamente la pregunta, pidieron un hijo. Si tiene mucha curiosidad sobre cómo se puede hacer con varios niños, consulte la respuesta revisada. - Bondsmith

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.