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

2287

Tengo un diseño similar a:

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

Me gustaría que el divsolo se expandiera a lo ancho que se tablevuelva mi .

2
  • 97
    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 elegirannakata 16 de ene. De 2009 a las 16:32
  • Ninguna de las siguientes respuestas funcionó para mí, excepto: display: table-O- height: fit-content!!! AlphaX 22/08/20 a las 13:11
2621

La solución es configurar tu diva display: inline-block.

4
  • 243
    @ leif81 Puede usar a spano a divo ulcualquier otra cosa, la parte importante es que para el contenedor que le gustaría tener el ancho mínimo tiene la propiedad CSSdisplay: inline-blockmiahelf 17/11/11 a las 8:23
  • 12
    si alguien se pregunta: uno puede centrar el padre de la tabla estableciendo "text-align: center" en su padre y "text-align: left" en él (por ejemplo, <body style = "text-align: center"> < span style = "text-align: left; display: inline-block;"> <table> ... </table> </span> </body>)bernstein 15/02/12 a las 23:09
  • 12
    No funciona en Chrome para mí con span, pero funciona con espacios en blanco: nowrap; albanx 07/07/12 a las 20:07
  • 62
    Tenga en cuenta que una vez que haya display: inline-blockconfigurado la propiedad margin: 0 auto;, no funcionará como se esperaba. En ese caso, si el contenedor principal tiene, text-align: center;entonces el inline-blockelemento estará centrado horizontalmente. Savas Vedova 9 abr .14 a las 12:09
352

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:

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

1
  • 37
    Yo diría que inline-blockestá destinado exactamente a esto y resuelve el problema a la perfección. miahelf 17/11/11 a las 8:24
246

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 diven otra div(si quieres mantener el comportamiento del bloque):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}
5
  • 23
    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 18/02/11 a las 14:26
  • @feeela - Siempre pongo un * delante del zoom, por ejemplo *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!). robocat 7 de agosto de 2012 a las 23:24
  • @robocat Sí, de hecho es una solución tener inline-blockhabilitado en IE 7.feeela 8 de agosto de 2012 a las 8:07
  • @feela - ¡tu comentario no tiene sentido para mí! Estaba sugiriendo poner * delante del zoom también Es decir * zoom: 1; robocat 22/08/12 a las 18:12
  • 4
    Explique por qué funciona su solución de bloque en línea. HelloWorldNoMore 26/04/2016 a las 22:43
243

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 con #elementsolo agregar margin: 0 auto.

6
  • 14
    +1: esta es la mejor y más limpia solución para los navegadores modernos que también permite centrar el elemento. position: absoluteEs necesario un comentario condicional con para <IE8. uınbɐɥs 6/07/12 a las 9:22
  • 22
    La especificación display: inline-blockno agrega márgenes. Pero CSS maneja los espacios en blanco para que se muestren entre los elementos en línea. feeela 6 de julio de 2012 a las 15:05
  • Explique por qué su solución de display: table funciona. HelloWorldNoMore 26/04/2016 a las 22:44
  • 3
    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 2/07/2016 a las 14:34
  • 1
    Este es el camino a seguir si tieneposition: absolute ... m4heshd 22 de mayo de 2018 a las 2:40
143

Puedes probar fit-content(CSS3):

div {
  width: fit-content; 
  /* To adjust the height as well */ 
  height: fit-content;
}
6
  • 2
    @BartlomiejSkwira ¿Algún sustituto que trabaje en IE o Eclipse? otra solución como inline-block no me funciona .. \DAVIDBALAS1 9 de mayo de 2016 a las 6:10
  • 19
    Esto tiene demasiado sentido, por supuesto que carece de apoyo. Sava B. 6 mar. 18 a las 17:33
  • fit-contentno parece funcionar para mí, pero sus primos max-contenty min-contentfuncionan bien. krubo 5 de septiembre de 2020 a las 17:38
  • La compatibilidad con el navegador deficiente para esto, es mucho mejor evitar y utilizar un inline-blockenfoque más convencional si desea confiabilidad en todos los navegadores. plong0 20/10/20 a las 23:09
  • 2
    Para mí, "width: -moz-fit-content; width: fit-content;" trabajó. De lo contrario, no funcionó en Firefox (en noviembre de 2020). S. Doe 6 nov.20 a las 17:07
101

Hay dos mejores soluciones

  1. display: inline-block;

    O

  2. display: table;

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

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

3
  • 2
    ¿Te importaría explicar por qué display:tablees mejor? Nathaniel Ford 11/07/2016 a las 23:29
  • 1
    Para la visualización: bloque en línea, debe utilizar el método de margen negativo para corregir el espaciado adicional. Shuvo Habib 12 de julio de 2016 a las 6:09
  • 11
    @NathanielFord, display:tabledeja el elemento en el contexto de formato de bloque, para que pueda 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 heredada de fuente / altura de línea, 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 lo tanto, posibles sorpresas. Ilya Streltsyn 8 de diciembre de 2017 a las 7:46
90

Lo que me funciona es:

display: table;

en el div. (Probado en Firefox y Google Chrome ).

4
  • 6
    Sí, especialmente si necesita centrar con margen: automático. Ese caso inline-block no es la solución. Zsolt Szatmari 3 de julio de 2014 a las 13:12
  • 1
    También tenga en cuenta que si desea que el relleno funcione dentro de este elemento, debe establecer el border-collapse: separate;estilo. Es predeterminado en muchos navegadores, pero a menudo marcos CSS como bootstrap restablecen su valor a collapse. Ruslan Stelmachenko 20 de mayo de 2016 a las 17:38
  • Probado en MSIE 6 en un teléfono con Windows Mobile 6.5 fabricado en 2009: se degrada elegantemente 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. Brown 10/07/2017 a las 16:56
  • Esto también funciona para mí, ¡gracias! Fabricio Leite 14 de mayo a las 17:50
85
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) .

1
  • 3
    Cualquiera que tenga este problema debe agregar todos estos estilos. Firefox agregó márgenes cuando no se usa-moz-inline-stackJustin 17/07/12 a las 18:48
48

Sin saber en qué contexto esta aparecerá, pero creo que el establecimiento de estilo CSS float, ya sea lefto righttendrá 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.

1
  • 1
    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 16 de ene. De 2009 a las 16:14
43

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 con él, 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 usarlo? : Dimensionamiento intrínseco y extrínseco .

Por ahora tienes que estar satisfecho con <span>o <div>configurar

display: inline-block;
1
  • 15
    intrinsicya que un valor no es estándar. De hecho lo es width: max-content. Vea la página de MDN sobre eso o el borrador ya vinculado. maryisdead 20 de mayo de 2015 a las 9:36
38
width:1px;
white-space: nowrap;

funciona bien para mí :)

3
  • Pero, de nuevo, mi caso era texto dentro de un div, y no una tabla como el OP. Rui Marques 3 de enero de 2013 a las 16:57
  • para el control deslizante de la interfaz de usuario de jquery, esto es excelente porque no es necesario establecer el ancho del elemento de contenidoCoffeJunky 6/0613 a las 21:14
  • width: auto; white-space: nowrap;hizo la cosa por mí. Antti Tanskanen 22/12/20 a las 12:14
37

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 clearfix si algo dentro de su div está flotando:

.my-div
{
    float: left;
}
1
  • 3
    Debería. ¿Qué tipo de documento estás usando? Soviut 18/10/09 a las 23:35
30

De acuerdo, en muchos casos, ni siquiera necesita hacer nada como div tiene por defecto heighty widthcomo automático, pero si no es su caso, la aplicación de la inline-blockpantalla funcionará para usted ... mire el código que creo para usted y está listo Qué estás buscando:

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

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

Si lo está utilizando display: flexpor cualquier motivo, puede utilizar en su lugar:

div {
    display: inline-flex;
}

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

1
  • Tenga en cuenta que esto no funcionará si su divelemento está dentro de un contenedor que es tanto display: flexy flex-flow: column. Esto se debe a que el valor predeterminado de align-itemses stretch. Debe establecer align-itemsalgo diferente a stretchesta situación para que esta solución funcione. Caleb Jay 22 de febrero a las 3:23
22

Simplemente ponga un estilo en su archivo CSS

div { 
    width: fit-content; 
}
4
  • 1
    No creo que esta sea una opción compatible con varios navegadores. David Rector 18 de mayo de 2018 a las 21:13
  • 2
    Actualmente no funciona en Edge: caniuse.com/#search=fit-contentmolsson 24 de mayo de 2018 a las 20:40
  • Puede usar -moz-fit-contentpara FF, presumiblemente los otros prefijos de proveedores permitirán los suyos propios ...Benj 1 de junio de 2019 a las 8:16
  • 1
    Esta es la misma que la respuesta de Vitalii Fedorenkomfluehr 20/09/19 a las 15:11
21

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

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

Espero que encuentres esto útil.

20

Puede usar inline-blockcomo @ 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 es compatible con el bloqueo en línea en absoluto, pero tiene -moz-inline-stacklo mismo

Algunos navegadores cruzados alrededor del inline-blockatributo 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/

1
20
<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. =)

2
  • 2
    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 manera. Tienes mi voto a favor. Craigo 27/03/12 a las 6:26
  • Haría esto, pero tengo que rodear cada cuadro de entrada, así que eso es mucho html adicional. NickSoft 1 de septiembre de 2015 a las 8:51
20

Intente usar la width: max-contentpropiedad 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>
15

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

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.
1
  • felicitaciones por display: inline-flex;. Por cierto, esto funciona sin prefijo para Chrome 62, firefox 57 y safari 11Horacio 24 nov 2017 a las 3:06
11

Al manipular Firebug, encontré el valor de la propiedad -moz-fit-contentque 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.

1
  • 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 11 ene 2017 a las 22:30
11
<div class="parentDiv" style="display:inline-block">
    // HTML elements
</div>

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

1
  • ¿Hay alguna forma en que pueda aplicar esto solo para el tamaño vertical para minimizar y mantener el tamaño horizontal? Gobliins 22 feb 2018 a las 10:15
11

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

div{
width:fit-content;
}
<div>
    <table>
    </table>
</div>
1
  • Tiene que width: -moz-fit-content;funcionar en Firefox. egdavid 22 mar a las 14:43
7

Resolví un problema similar (donde no quería usar display: inline-blockporque el elemento estaba centrado) agregando una spanetiqueta dentro de la divetiqueta y moviendo el formato CSS de la divetiqueta externa a la nueva spanetiqueta interna . Simplemente lanzando esto como otra idea alternativa si display: inline blockno es una respuesta adecuada para usted.

7

Podemos usar cualquiera de las dos formas en el divelemento:

display: table;

o,

display: inline-block; 

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

6
div{
  width:auto;
  height:auto;
}
1
  • 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í. quotesBro 13 feb 2018 a las 10:15
6
    .outer{
          width:fit-content;   
          display: flex;
          align-items: center;
    }
    .outer .content{
         width: 100%;
    }
        
        
        
        
<div class=outer>
    <div class=content>
       Add your content here


    </div>
        
</div>