¿Existe un valor de CSS en varios navegadores para "width: -moz-fit-content;"?

85

Necesito que algunos divs se coloquen en el centro y se ajusten al ancho de su contenido al mismo tiempo.

Ahora lo estoy haciendo así:

.mydiv-centerer{

  text-align: center;

  .mydiv {
    background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7);
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 5px #0099FF;
    color: white;
    margin: 10px auto;
    padding: 10px;
    text-align: justify;
    width: -moz-fit-content;
  }
}

Ahora, el último comando "ancho: -moz-fit-content;" es exactamente lo que necesito!

El único problema es ... funciona solo en Firefox.

También intenté con "display: inline-block;" , pero necesito que estos divs se comporten como divs. Es decir, cada div siguiente debe estar debajo y no en línea con el anterior.

¿Conoce alguna posible solución para varios navegadores?

firefox css cross-browser

— DuArme
fuente

1

Pruebe una de estas respuestas: stackoverflow.com/questions/5803030/…

— Matt H

3

Chome admite fit-contentahora.

— LinuxDisciple

167

Por fin lo arreglé simplemente usando:

display: table;

— DuArme
fuente

4

Vine aquí buscando exactamente los mismos términos de su pregunta. Lo hice display: tabley margin: autopara centrar a form. ¡Excelente! : D

— Leniel Maccaferri

Junto con, tuve que usar espacios en blanco: pre! Important;

— Bimal Das

2

No respeta algunos atributos, p max-width: 100%. Ej .

— Daniel

71

MDN de Mozilla sugiere algo como lo siguiente [ fuente ]:

 p {
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}

— Justin Geeslin
fuente

¿Podemos especificar la propiedad de ancho dos veces como lo hizo para el estilo p? como ancho: intrínseco; / * Safari / WebKit usa un nombre / ancho no estándar : -moz-max-content; / Firefox / Gecko * /

— Sagar Bhosale

1

-moz-max-contentsolo es equivalente a -moz-fit-contentmientras que el elemento padre es más ancho. -moz-fit-contentse ajustará al contenido y ajustará el texto, pero -moz-max-contentse extenderá fuera del elemento principal. Lo mismo se aplica a Chrome -webkit-max-contenty fit-content.

— LinuxDisciple

No olvide agregar width: max-content;.

— Tobias Tengler

13

En un caso similar usé: white-space: nowrap;

— usuario570605
fuente

1

Esto solucionó mi problema con el desbordamiento de contenido de un menú desplegable. ¡Gracias!

— Zach Leighton

7

¿Existe una única declaración que solucione esto para Webkit, Gecko y Blink? No. Sin embargo, existe una solución para varios navegadores que especifica varios valores de propiedad de ancho que corresponden a la convención de cada motor de diseño.

.mydiv {  
  ...
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
  ...
}

Adaptado de: MDN

— b_archer
fuente

2

Yo uso estos:

.right {display:table; margin:-18px 0 0 auto;}
.center {display:table; margin:-18px auto 0 auto;}

— diyismo
fuente

2

width: intrinsic;           /* Safari/WebKit uses a non-standard name */
width: -moz-max-content;    /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */

— Ihor Pavlyk
fuente

-1

¿Por qué no usar algunos brs?

<div class="mydiv-centerer">
    <div class="mydiv">Some content</div><br />
    <div class="mydiv">More content than before</div><br />
    <div class="mydiv">Here is a lot of content that
                       I was not anticipating</div>    
</div>

CSS

.mydiv-centerer{
    text-align: center;
}

.mydiv{
    background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7);
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 5px #0099FF;
    color: white;
    margin: 10px auto;
    padding: 10px;
    text-align: justify;
    display:inline-block;
}

Ejemplo: http://jsfiddle.net/YZV25/

— Jason Gennaro
fuente

2

Muchas gracias, funciona, pero hace muy difícil manejar el margen superior e inferior entre los divs. Encontré una mejor solución simplemente usando en display: table;lugar de display: inline-block;.

— DuArme