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

Ich habe ein ähnliches Layout wie:

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

Ich möchte, dass sich das divnur so weit ausdehnt, wie es tablewird.

Die Lösung ist Ihr gesetzt divzu display: inline-block.

Sie möchten ein Blockelement mit einer von CSS als "Shrink-to-Fit" bezeichneten Breite, und die Spezifikation bietet keinen gesegneten Weg, um so etwas zu erhalten. In CSS2 ist das Verkleinern kein Ziel, sondern bedeutet, mit einer Situation umzugehen, in der der Browser eine Breite aus dem Nichts "herausholen" muss. Diese Situationen sind:

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

wenn keine Breite angegeben ist. Ich habe gehört, dass sie darüber nachdenken, das, was Sie wollen, in CSS3 hinzuzufügen. Machen Sie sich vorerst mit einem der oben genannten Punkte zufrieden.

Die Entscheidung, das Feature nicht direkt verfügbar zu machen, mag seltsam erscheinen, aber es gibt einen guten Grund. Es ist teuer. Auf Anpassung verkleinern bedeutet, dass mindestens zweimal formatiert wird: Sie können erst mit der Formatierung eines Elements beginnen, wenn Sie dessen Breite kennen, und Sie können die Breite nicht berechnen, ohne den gesamten Inhalt zu durchlaufen. Außerdem muss man nicht so oft schrumpfen, wie man denkt. Warum brauchst du extra Div um deinen Tisch? Vielleicht ist Tabellenbeschriftung alles, was Sie brauchen.

Ich denke mit

display: inline-block;

würde funktionieren, bin mir aber nicht sicher über die Browserkompatibilität.

Eine andere Lösung wäre, Ihre divin eine andere zu wickeln div(wenn Sie das Blockverhalten beibehalten möchten):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

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

Ich würde dies empfehlen:

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

Bonus: Sie können diese schicke Neuheit jetzt auch ganz einfach #elementdurch Hinzufügen zentrieren margin: 0 auto.

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

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

• Browser-Unterstützung
• Spezifikation

Was für mich funktioniert ist:

display: table;

in der div. (Getestet am Firefox und Google Chrome ).

Es gibt zwei bessere Lösungen

1. display: inline-block;

   ODER

2. display: table;

Von diesen beiden display:table;ist besser, weil es display: inline-block;einen zusätzlichen Spielraum gibt.

Denn display:inline-block;Sie können die negative Randmethode verwenden, um den zusätzlichen Platz zu fixieren

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) .

Ich weiß nicht, in welchem ​​Kontext dies erscheinen wird, aber ich glaube, dass die CSS-artige Eigenschaft diesen Effekt floatentweder hat leftoder righthaben wird. Auf der anderen Seite hat es auch andere Nebenwirkungen, z. B. das Umschweben von Text.

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

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

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

width: intrinsic;

Leider ist der IE damit im Rückstand und unterstützt es noch nicht

Mehr dazu: CSS Intrinsic & Extrinsic Sizing Module Level 3 und Kann ich verwenden? : Intrinsic & Extrinsic Sizing .

Vorerst muss man zufrieden sein <span>oder sich darauf <div>einstellen

display: inline-block;

Eine CSS2-kompatible Lösung ist zu verwenden:

.my-div
{
    min-width: 100px;
}

Sie können Ihr Div auch schweben lassen, wodurch es so klein wie möglich wird. Sie müssen jedoch einen Clearfix verwenden, wenn etwas in Ihrem Div schwebt:

.my-div
{
    float: left;
}

width:1px;
white-space: nowrap;

funktioniert gut für mich :)

OK, in vielen Fällen müssen Sie nicht einmal etwas tun, wie es div standardmäßig heightund widthautomatisch getan hat , aber wenn dies nicht der Fall ist, inline-blockfunktioniert das Anwenden der Anzeige für Sie ... Schauen Sie sich den Code an, den ich für Sie erstellt habe, und es funktioniert Was suchen Sie:

div {
  display: inline-block;
}

<div>
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
      <td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
    </tr>
  </table>
</div>

Dies wurde in Kommentaren erwähnt und ist in einer der Antworten schwer zu finden:

Wenn Sie display: flexaus irgendeinem Grund verwenden, können Sie stattdessen Folgendes verwenden:

div {
    display: inline-flex;
}

Dies wird auch in allen Browsern weitgehend unterstützt.

Sie können dies einfach mit display: inline;(oder white-space: nowrap;) tun .

Ich hoffe, Sie finden das nützlich.

Sie können inline-blockals @ user473598 verwenden, aber Vorsicht vor älteren Browsern.

/* Your're working with */
display: inline-block;

/* For IE 7 */
zoom: 1;
*display: inline;

/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;

Mozilla unterstützt Inline-Block überhaupt nicht, aber sie haben -moz-inline-stackungefähr das Gleiche

Einige browserübergreifende inline-blockAnzeigeattribute: https://css-tricks.com/snippets/css/cross-browser-inline-block/

Einige Tests mit diesem Attribut finden Sie unter: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Fügen Sie einfach einen Stil in Ihre CSS-Datei ein

div { 
    width: fit-content; 
}

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <div id="content_lalala">
                this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
            </div>
        </td>
    </tr>
</table>

Ich weiß, dass die Leute manchmal keine Tische mögen, aber ich muss Ihnen sagen, ich habe die CSS-Inline-Hacks ausprobiert und sie haben in einigen Divs funktioniert, in anderen jedoch nicht. Es war also wirklich einfacher, das expandierende Div einzuschließen Eine Tabelle ... und ... kann die Inline-Eigenschaft haben oder nicht, und dennoch ist die Tabelle diejenige, die die Gesamtbreite des Inhalts enthält. =)

Eine funktionierende Demo ist hier-

.floating-box {
    display:-moz-inline-stack;
    display: inline-block;

    width: fit-content; 
    height: fit-content;

    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;  
}

<h2>The Way is using inline-block</h2>

Supporting elements are also added in CSS.

<div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
</div>

Meine CSS3-Flexbox-Lösung in zwei Varianten: Die obere verhält sich wie eine Spannweite und die untere verhält sich wie ein Div und nimmt mit Hilfe eines Wrappers die gesamte Breite ein. Ihre Klassen sind "top", "bottom" und "bottomwrapper".

body {
    font-family: sans-serif;
}
.top {
    display: -webkit-inline-flex;
    display: inline-flex;
}
.top, .bottom {
    background-color: #3F3;
    border: 2px solid #FA6;
}
/* bottomwrapper will take the rest of the width */
.bottomwrapper {
    display: -webkit-flex;
    display: flex;
}
table {
    border-collapse: collapse;
}
table, th, td {
    width: 280px;
    border: 1px solid #666;
}
th {
    background-color: #282;
    color: #FFF;
}
td {
    color: #444;
}
th, td {
    padding: 0 4px 0 4px;
}

Is this
<div class="top">
	<table>
        <tr>
            <th>OS</th>
            <th>Version</th> 
        </tr>
        <tr>
            <td>OpenBSD</td>
            <td>5.7</td> 
        </tr>
        <tr>
            <td>Windows</td>
            <td>Please upgrade to 10!</td> 
        </tr>
    </table>
</div>
what you are looking for?
<br>
Or may be...
<div class="bottomwrapper">
    <div class="bottom">
    	<table>
            <tr>
                <th>OS</th>
                <th>Version</th> 
            </tr>
            <tr>
                <td>OpenBSD</td>
                <td>5.7</td> 
            </tr>
            <tr>
                <td>Windows</td>
                <td>Please upgrade to 10!</td> 
            </tr>
        </table>
    </div>
</div>
this is what you are looking for.

<div class="parentDiv" style="display:inline-block">
    // HTML elements
</div>

Dadurch entspricht die übergeordnete Div-Breite der größten Elementbreite.

Versuchen Sie es display: inline-block;. Damit es browserübergreifend kompatibel ist, verwenden Sie bitte den folgenden CSS-Code.

div {
  display: inline-block;
  display:-moz-inline-stack;
  zoom:1;
  *display:inline;
  border-style: solid;
  border-color: #0000ff;
}

<div>
  <table>
    <tr>
      <td>Column1</td>
      <td>Column2</td>
      <td>Column3</td>
    </tr>
  </table>
</div>

Ich habe Firebug manipuliert und den Eigenschaftswert gefunden, -moz-fit-contentder genau das tut, was das OP wollte und wie folgt verwendet werden kann:

width: -moz-fit-content;

Obwohl es nur unter Firefox funktioniert, konnte ich für andere Browser wie Chrome kein Äquivalent finden.

Sie können diesen Code ausprobieren. Folgen Sie dem Code im Abschnitt CSS.

div {
  display: inline-block;
  padding: 2vw;
  background-color: green;
}

table {
  width: 70vw;
  background-color: white;
}

<div>
    <table border="colapsed">
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>

    </table>
</div>

Ich habe ein ähnliches Problem gelöst (bei dem ich es nicht verwenden wollte, display: inline-blockweil das Element zentriert war), indem ich ein spanTag innerhalb des divTags hinzugefügt und die CSS-Formatierung vom äußeren divTag zum neuen inneren spanTag verschoben habe. Wirf dies einfach als eine andere alternative Idee raus, wenn display: inline blockes keine passende Antwort für dich ist.

Wir können eine der beiden Möglichkeiten für das divElement verwenden:

display: table;

oder,

display: inline-block; 

Ich bevorzuge display: table;es, alle zusätzlichen Leerzeichen für sich zu verwenden , da sie alle zusätzlichen Leerzeichen alleine verarbeiten. Während display: inline-blockbenötigt etwas mehr Platz Befestigung.

div{
  width:auto;
  height:auto;
}

Wenn Sie Container haben, die Zeilen brechen, nach Stunden nach einer guten CSS-Lösung suchen und keine finden, verwende ich jetzt stattdessen jQuery:

$('button').click(function(){

  $('nav ul').each(function(){
    
    $parent = $(this).parent();
    
    $parent.width( $(this).width() );
    
  });
});

nav {
  display: inline-block;
  text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
  display: inline;
}

/* needed style */
ul {
  padding: 0;
}
body {
  width: 420px;
}

/* just style */
body {
  background: #ddd;
  margin: 1em auto;
}
button {
  display: block;
}
nav {
  background: #bbb;
  margin: 1rem auto;
  padding: 0.5rem;
}
li {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: solid thin #777;
  margin: 4px;
  background: #999;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>fix</button>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
  </ul>
</nav>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
    <li>1</li>
    <li>5</li>
    <li>9</li>
    <li>2</li>
    <li>6</li>
    <li>5</li>
    <li>3</li>
    <li>5</li>
  </ul>
</nav>

Überarbeitet (funktioniert, wenn Sie mehrere untergeordnete Elemente haben): Sie können jQuery verwenden (siehe JSFiddle-Link)

var d= $('div');
var w;


d.children().each(function(){
 w = w + $(this).outerWidth();
 d.css('width', w + 'px')
});

Vergessen Sie nicht, die jQuery einzuschließen ...

Siehe die JSfiddle hier

Ich habe es versucht div.classname{display:table-cell;}und es hat funktioniert!