Wie kann ich ein Div nicht größer als sein Inhalt machen?

Question

Ich habe ein ähnliches Layout:

<div>
    <table>
    </table>
</div>

Ich möchte, dass die div nur so weit ausdehnen, wie mein table wird.

Answer 1

Es gibt zwei bessere Lösungen

1. display: inline-block;

   OR

2. display: table;

Aus diesen beiden display:table; ist besser, porque display: inline-block; fügt eine zusätzliche Marge hinzu.

Para display:inline-block; Sie können die Methode des negativen Randes verwenden, um den zusätzlichen Raum zu fixieren

Answer 2

Was für mich funktioniert, ist:

display: table;

im div . (Getestet an Firefox et Google Chrome ).

Answer 3

display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

Foo Hack - Browserübergreifende Unterstützung für inline-block Styling (2007-11-19) .

Answer 4

Ich weiß nicht, in welchem Kontext dies erscheinen wird, aber ich glaube, die CSS-style-Eigenschaft float entweder left ou right wird diese Wirkung haben. Andererseits hat es auch andere Nebeneffekte, wie z. B. die Möglichkeit, dass der Text um ihn herum schwebt.

Bitte korrigieren Sie mich, wenn ich falsch liege, ich bin mir nicht 100%ig sicher und kann es derzeit nicht selbst testen.

Answer 5

Die Antwort auf deine Frage liegt in der Zukunft, mein Freund ...

nämlich "intrinsic" kommt mit dem neuesten CSS3-Update

width: intrinsic;

leider IE ist damit im Rückstand, so dass er es noch nicht unterstützt

Mehr dazu: CSS Intrinsic & Extrinsic Sizing Modul Stufe 3 et Kann ich sie verwenden? : Intrinsische und extrinsische Größenbestimmung .

Für den Moment müssen Sie sich zufrieden geben mit <span> ou <div> eingestellt auf

display: inline-block;