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

div{
  width:auto;
  height:auto;
}

Answer 2

Wenn Sie stundenlang nach einer guten CSS-Lösung gesucht und keine gefunden haben, Ich verwende jetzt jQuery stattdessen:

$('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>

Answer 3

Überarbeitet (funktioniert, wenn Sie mehrere Kinder haben): Sie können jQuery verwenden (sehen Sie sich den JSFiddle-Link an)

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

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

Vergessen Sie nicht, das jQuery einzubinden...

Siehe das JSfiddle hier

Answer 4

Sie könnten verwenden display: flex für übergeordnetes Element

#parentElement {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }

Answer 5

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