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

Durch Herumspielen mit Firebug habe ich den Eigenschaftswert -moz-fit-content der genau das tut, was der Auftraggeber wollte, und wie folgt verwendet werden könnte:

width: -moz-fit-content;

Obwohl es nur mit Firefox funktioniert, konnte ich keine Entsprechung für andere Browser wie Chrome finden.

Answer 2

div{
width:fit-content;
}

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

Answer 3

    .outer{
          width:fit-content;   
          display: flex;
          align-items: center;
    }
    .outer .content{
         width: 100%;
    }

<div class=outer>
    <div class=content>
       Add your content here

    </div>

</div>

Answer 4

Wir können eine der beiden Möglichkeiten auf der div Element:

display: table;

oder,

display: inline-block; 

Ich bevorzuge die Verwendung von display: table; weil es alle zusätzlichen Leerzeichen selbständig verarbeitet. Während display: inline-block muss etwas mehr Platz geschaffen werden.

Answer 5

Ich habe ein ähnliches Problem gelöst (bei dem ich nicht mit display: inline-block weil der Artikel zentriert wurde) durch Hinzufügen eines span Tag innerhalb der div Tag und das Verschieben der CSS-Formatierung aus dem äußeren div Tag an das neue innere span Tag. Ich werfe dies nur als eine weitere alternative Idee in den Raum, wenn display: inline block ist keine geeignete Antwort für Sie.