it-swarm.com.de

Gibt es einen CSS-Cross-Browser-Wert für "width: -moz-fit-content;"?

Ich brauche einige divs, um center-positioniert und passen ihre Inhaltsbreite gleichzeitig.

Ich mache es jetzt so:

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

Nun der letzte Befehl "width: -moz-fit-content;" ist genau was ich brauche! 

Das einzige Problem ist .. es funktioniert nur bei Firefox.

Ich habe auch versucht mit "display: Inline-Block;", aber ich brauche diese divs, um sich wie divs zu verhalten. Jedes nächste Div sollte nämlich under sein und nicht Inline, das vorherige.

Kennen Sie eine mögliche Cross-Browser-Lösung?

54
Darme

Zum Schluss habe ich es einfach behoben mit:

display: table;
108
Darme

Mozillas MDN schlägt Folgendes vor [ 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

Gibt es eine einzige Deklaration, mit der dies für Webkit, Gecko und Blink behoben wird? Nein. Es gibt jedoch eine Cross-Browser-Lösung, indem mehrere Werteigenschaften für die Breite angegeben werden, die der Konvention der jeweiligen Layout-Engine entsprechen.

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

Angepasst von: MDN

7
b_archer

In einem ähnlichen Fall habe ich verwendet: white-space: nowrap;

4
user570605

Ich benutze diese:

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

Warum nicht einige brs verwenden?

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

Beispiel: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