web-dev-qa-db-fra.com

Existe-t-il une valeur CSS cross-browser pour "width: -moz-fit-content;"?

J'ai besoin que certains divs soient centrés _ et ajustent leur largeur en même temps.

Je le fais maintenant comme ça:

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

Maintenant, la dernière commande "width: -moz-fit-content;" est exactement ce dont j'ai besoin! 

Le seul problème est .. cela ne fonctionne que sur Firefox.

J'ai aussi essayé avec "display: inline-block;", mais j'ai besoin que ces divs se comportent comme des divs. À savoir, chaque prochaine div doit être sous _ et non inline_, la précédente.

Connaissez-vous une solution multi-navigateur possible?

cssfirefoxcss3cross-browser
54
Darme

Enfin je l'ai corrigé simplement en utilisant:

display: table;
108
Darme

Le MDN de Mozilla suggère quelque chose comme ceci [ source ]:

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

Existe-t-il une déclaration unique qui résout ce problème pour Webkit, Gecko et Blink? Cependant, il existe une solution inter-navigateurs en spécifiant plusieurs valeurs de propriété de largeur correspondant à la convention de chaque moteur de présentation.

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

Adapté de: MDN

7
b_archer

Dans un cas similaire, j'ai utilisé: white-space: nowrap;

4
user570605

J'utilise ces:

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

Pourquoi ne pas utiliser certains 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;
}

Exemple:http://jsfiddle.net/YZV25/

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