¿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

Respuestas:

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