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

Die Lösung besteht darin, Ihre div a display: inline-block .

Answer 2

Sie wollen ein Blockelement, das eine Breite hat, die CSS "shrink-to-fit" nennt, und die Spezifikation bietet keine gesegnete Möglichkeit, so etwas zu erhalten. In CSS2 ist "shrink-to-fit" kein Ziel, sondern ein Mittel, um mit einer Situation umzugehen, in der der Browser eine Breite aus der Luft holen "muss". Solche Situationen sind:

• Schwimmer
• absolut positioniertes Element
• Inline-Block-Element
• Tischelement

wenn keine Breite angegeben ist. Ich habe gehört, sie denken über das Hinzufügen, was Sie wollen in CSS3. Für jetzt, machen Sie mit einem der oben genannten zu tun.

Die Entscheidung, die Funktion nicht direkt zu veröffentlichen, mag seltsam erscheinen, aber es gibt einen guten Grund dafür. Es ist teuer. Einschrumpfen bedeutet, dass man mindestens zweimal formatieren muss: Man kann nicht mit der Formatierung eines Elements beginnen, bevor man seine Breite kennt, und man kann die Breite nicht berechnen, ohne den gesamten Inhalt zu durchlaufen. Außerdem braucht man das Schrumpfen nicht so oft, wie man vielleicht denkt. Warum brauchen Sie ein zusätzliches Div um Ihre Tabelle? Vielleicht ist die Tabellenüberschrift alles, was Sie brauchen.

Answer 3

Ich denke, mit

display: inline-block;

würde funktionieren, aber ich bin mir nicht sicher, ob der Browser kompatibel ist.

---

Eine andere Lösung wäre, Ihre div in einem anderen div (wenn Sie das Blockverhalten beibehalten wollen):

HTML:

<div>
    <div class="yourdiv">
        content
    </div>
</div>

CSS:

.yourdiv
{
    display: inline;
}

Answer 4

Sie können versuchen fit-content (CSS3):

div {
  width: fit-content; 
  /* To adjust the height as well */ 
  height: fit-content;
}

• Browser-Unterstützung
• Spezifikation

Answer 5

display: inline-block fügt einen zusätzlichen Rand zu Ihrem Element hinzu.

Ich würde dies empfehlen:

#element {
    display: table; /* IE8+ and all other modern browsers */
}

Bonus: Sie können jetzt auch ganz einfach das neue, schicke #element einfach durch Hinzufügen von margin: 0 auto .