Pregunta ¿Cómo hacer div no más grande que su contenido?


Tengo un diseño similar a:

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

Me gustaría para el div expandir solo a tan ancho como mi table se convierte


1687
2018-01-16 16:03


origen


Respuestas:


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


2033
2017-10-12 16:47



Usted quiere un elemento de bloque que tenga lo que CSS llama encogimiento para ajustar el ancho y la especificación no proporciona una buena manera de obtener tal cosa. En CSS2, reducir 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 agregar lo que quieres 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 revisar todo el contenido. Además, uno no necesita un elemento de contracción para ajustar con la frecuencia que uno pueda pensar. ¿Por qué necesitas div adicional alrededor de tu mesa? Tal vez la leyenda de la tabla es todo lo que necesitas.


307
2018-01-16 16:40



Creo que usando

display: inline-block;

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


Otra solución sería envolver su div en otro div (si quieres mantener el comportamiento del bloque):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

196
2018-01-16 16:41



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

Yo recomendaría esto:

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

180
2018-05-12 23:39



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

Foo Hack - Soporte de navegador cruzado para el estilo de bloque en línea (2007-11-19).


82
2017-08-25 19:36



Lo que funciona para mí es:

display: table;

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


74
2018-01-11 12:01



Puedes probar fit-content (CSS3):

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

60
2018-05-27 00:41



Hay dos mejores soluciones

  1. display: inline-block;

    O

  2. display: table;

Fuera de estos dos display:table; es mejor. 

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


53
2018-05-10 20:16



La respuesta a su pregunta reside en el futuro, mi amigo ...

a saber, "intrínseco" viene con la última actualización de CSS3

width: intrinsic;

Desafortunadamente ES DECIR está detrás con él, por lo que aún no lo admite

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

Por ahora debes estar satisfecho con <span> o <div> ajustado a

display: inline-block;

41
2017-12-11 13:07



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

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


35
2018-01-16 16:08



width:1px;
white-space: nowrap;

funciona bien para mí :)


32
2017-08-26 08:14