html - pantalla - ¿Cómo hacer div no más grande que su contenido?

div tamaño fijo

Question

Tengo un diseño similar a:

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

Me gustaría que la div solo se expanda a la anchura de mi table .

Answer 1

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 desea mantener el comportamiento de bloqueo):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

Answer 2

Desea un elemento de bloque que tenga lo que CSS denomina anchura de encogimiento a ajuste y la especificación no proporciona una forma bendita de obtener tal cosa. En CSS2, reducir el tamaño no es un objetivo, pero significa lidiar con una situación en la que el navegador "tiene que" obtener una amplitud del aire. Esas situaciones son:

• flotador
• elemento absolutamente posicionado
• elemento de bloque en linea
• elemento de tabla

Cuando no hay ancho especificado. He oído que piensan en agregar lo que quieres en CSS3. Por el momento, hacer con uno de los anteriores.

La decisión de no exponer la característica 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 de todo el contenido. Además, uno no necesita elementos de encogimiento para encajar tan a menudo como se pueda pensar. ¿Por qué necesitas div extra alrededor de tu mesa? Tal vez el título de la tabla es todo lo que necesitas.

Answer 3

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

Si está usando display: flex por cualquier razón, puede usar:

div {
    display: inline-flex;
}

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

Answer 4

Hay dos mejores soluciones.

1. display: inline-block;

   O

2. display: table;

Fuera de estas dos display:table; es mejor.

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

Answer 5

Intente display: inline-block; . Para que sea compatible con todos los 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>

Answer 6

La respuesta a tu pregunta está en el futuro, mi amigo ...

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

width: intrinsic;

Lamentablemente, IE está detrás de él, por lo que aún no lo admite

Más sobre esto: CSS Intrinsic & Extrinsic Sizing Module Level 3 y Can I Use? : Dimensionamiento intrínseco y extrínseco .

Por ahora tiene que estar satisfecho con <span> o <div> configurado para

display: inline-block;

Answer 7

La solución es configurar tu div para que display: inline-block .

Answer 8

Lo que funciona para mí es:

display: table;

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

Answer 9

Manipulando con Firebug encontré el valor de propiedad -moz-fit-content que hace exactamente lo que el OP quería 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.

Answer 10

Mi solución flexbox de CSS3 en dos versiones: la que está en la parte superior se comporta como un tramo y la que está en la parte inferior se comporta como un div, tomando todo el ancho con la ayuda de una envoltura. 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.

Answer 11

Podemos usar cualquiera de las dos formas en el elemento div :

display: table;

o,

display: inline-block; 

Prefiero usar display: table; , porque maneja, todos los espacios extra por su cuenta. Mientras se display: inline-block necesita un poco de espacio adicional de fijación.

Answer 12

Puede usar inline-block como @ user473598, pero tenga cuidado con los navegadores 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 bloque en línea en absoluto, pero tienen -moz-inline-stack que es casi igual

Algún navegador cruzado alrededor inline-block atributo de visualización de inline-block en inline-block : https://css-tricks.com/snippets/css/cross-browser-inline-block/

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

Answer 13

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

Espero que encuentres esto útil.

Answer 14

Puedes probar fit-content (CSS3):

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

• Soporte del navegador
• Specification

Answer 15

Resolví un problema similar (donde no quería usar display: inline-block porque el elemento estaba centrado) agregando una etiqueta de span dentro de la etiqueta div , y moviendo el formato CSS de la etiqueta div externa a la nueva interna etiqueta de span Simplemente lanzar esto como otra idea alternativa si se display: inline block no es una respuesta adecuada para usted.

Answer 16

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

Ver el JSfiddle aquí.

Answer 17

Si tiene contenedores rompiendo líneas, después de horas buscando una buena solución CSS y no encontrar 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>

Answer 18

Sin saber en qué contexto aparecerá esto, pero creo que la propiedad de estilo CSS float hacia la left o hacia la 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íjame si estoy equivocado, no estoy 100% seguro y actualmente no puedo probarlo.

Answer 19

Solo pon un estilo en tu archivo CSS

div { 
    width: fit-content; 
}

Answer 20

Una demostración de trabajo 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>

Answer 21

Una solución compatible con CSS2 es usar:

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

También puedes hacer flotar tu div, lo que lo forzará lo más pequeño posible, pero necesitarás usar un clearfix si algo dentro de tu div está flotando:

.my-div
{
    float: left;
}

Answer 22

Yo sólo establecería el padding: -whateverYouWantpx;

Answer 23

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

Yo recomendaría esto:

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

Answer 24

div.classname{display:table-cell;} y funcionó!

Answer 25

De acuerdo, en muchos casos ni siquiera necesita hacer nada, ya que por defecto div tiene height y width como automático, pero si no es su caso, aplicar la pantalla de inline-block funcionará para usted ... mire el código que creo para ti y es hacer 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>

Answer 26

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

Answer 27

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

Esto hará que el ancho div divergente sea igual al ancho del elemento más grande.

Answer 28

<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 mesas a veces, pero debo decirte que probé los hacks en línea css, y funcionaron un poco en algunos divs, pero en otros no, así que fue realmente más fácil incluir el div en expansión. una tabla ... y ... puede tener o no la propiedad en línea y aún así la tabla es la que tendrá el ancho total del contenido. =)

Answer 29

div{
  width:auto;
  height:auto;
}

Answer 30

width:1px;
white-space: nowrap;

funciona bien para mi :)