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

84

Ich brauche einige Divs, um mittig positioniert zu sein und gleichzeitig ihre Inhaltsbreite anzupassen .

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 das was ich brauche!

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

Ich habe es auch mit "display: inline-block" versucht. , aber ich brauche diese divs, um mich wie divs zu verhalten. Jeder nächste Div sollte nämlich unter dem vorherigen und nicht inline sein .

Kennen Sie eine mögliche browserübergreifende Lösung?

firefox css cross-browser DuArme
quelle

1

Versuchen Sie eine dieser Antworten: stackoverflow.com/questions/5803030/…

Matt H

3

Chome unterstützt fit-contentjetzt.

LinuxDisciple

161

Endlich habe ich es einfach behoben mit:

display: table;

DuArme
quelle

4

Ich bin hierher gekommen, um genau nach den gleichen Begriffen Ihrer Frage zu suchen. Ich habe display: tableund margin: autozentrieren a form. Toll! : D

Leniel Maccaferri

Zusammen mit musste ich Leerzeichen verwenden: pre! Important;

Bimal Das

Respektiert einige Attribute nicht, z max-width: 100%.

Daniel

69

Mozillas MDN schlägt so etwas wie Folgendes vor [ Quelle ]:

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

Justin Geeslin
quelle

Können wir die Breite zweimal so angeben, wie Sie es für das Styling von p getan haben? wie Breite: intrinsisch; / * Safari / WebKit verwendet einen nicht standardmäßigen Namen / eine nicht standardmäßige Breite: -moz-max-content; / Firefox / Gecko * /

Sagar Bhosale

1

-moz-max-contentist nur äquivalent zu, -moz-fit-contentwährend das übergeordnete Element breiter ist. -moz-fit-contentpasst zum Inhalt und umschließt den Text, -moz-max-contenterstreckt sich jedoch außerhalb des übergeordneten Elements. Gleiches gilt für Chrome -webkit-max-contentund fit-content.

LinuxDisciple

Vergiss nicht hinzuzufügen width: max-content;.

Tobias Tengler

12

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

user570605
quelle

1

Dies hat mein Problem mit dem Inhaltsüberlauf eines Dropdowns behoben. Vielen Dank!

Zach Leighton

7

Gibt es eine einzige Deklaration, die dies für Webkit, Gecko und Blink behebt? Nein. Es gibt jedoch eine browserübergreifende Lösung, bei der Eigenschaftswerte für mehrere Breiten angegeben werden, die der Konvention der einzelnen Layout-Engines entsprechen.

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

Adaptiert von: MDN

b_archer
quelle

2

Ich benutze diese:

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

DIYismus
quelle

2

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

Ihor Pavlyk
quelle

-1

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/

Jason Gennaro
quelle

2

Vielen Dank, es funktioniert, aber es ist zu schwierig, den oberen und unteren Rand zwischen den Divs zu handhaben. Ich habe eine bessere Lösung gefunden, indem ich einfach display: table;statt display: inline-block;.

DuArme

-1

Unten arbeitete einer für mich sowohl in Chrom als auch in Firefox

div {
  max-width: max-content;
}

Sivakumar Tadisetti
quelle