Frage Wie div nicht größer als sein Inhalt machen?


Ich habe ein Layout ähnlich dem:

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

Ich möchte für die div nur so weit zu erweitern wie meine table wird.


1687
2018-01-16 16:03


Ursprung


Antworten:


Die Lösung besteht darin, Ihren div zu display: inline-block.


2033
2017-10-12 16:47



Sie möchten ein Blockelement, das über CSS-Schrumpfanpassungsbreite verfügt, und die Spezifikation bietet keinen gesegneten Weg, um so etwas zu erhalten. In CSS2 ist Shrink-to-Fit kein Ziel, sondern bedeutet, sich mit einer Situation zu befassen, in der der Browser "eine Breite aus dem Nichts bekommen muss". Diese Situationen sind:

  • schweben
  • absolut positioniertes Element
  • Inline-Blockelement
  • Tabellenelement

wenn keine Breite angegeben ist. Ich habe gehört, dass sie darüber nachdenken, was Sie in CSS3 hinzufügen möchten. Für jetzt, machen Sie sich mit einem der oben genannten.

Die Entscheidung, das Feature nicht direkt verfügbar zu machen, mag seltsam erscheinen, aber es gibt einen guten Grund. Es ist teuer. Shrink-to-fit bedeutet, dass die Formatierung mindestens zweimal erfolgt: Sie können erst dann ein Element formatieren, wenn Sie dessen Breite kennen, und Sie können die Breite nicht berechnen, indem Sie den gesamten Inhalt durchgehen. Außerdem braucht man kein Schrumpf-zu-Sitz-Element, so oft man vielleicht denkt. Warum brauchst du extra div um deinen Tisch? Vielleicht ist die Tabellenüberschrift alles, was Sie brauchen.


307
2018-01-16 16:40



Ich denke mit

display: inline-block;

würde funktionieren, aber ich bin mir nicht sicher über die Browser-Kompatibilität.


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

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

196
2018-01-16 16:41



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

Ich würde das empfehlen:

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

180
2018-05-12 23:39



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

Foo Hack - Cross-Browser-Unterstützung für Inline-Block-Styling (2007-11-19).


82
2017-08-25 19:36



Was für mich funktioniert ist:

display: table;

in dem div. (Getestet am Feuerfuchs und Google Chrome).


74
2018-01-11 12:01



Du kannst es versuchen fit-content (CSS3):

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

60
2018-05-27 00:41