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

Sie können verwenden inline-block wie @user473598, aber Vorsicht bei ä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-stack was ungefähr dasselbe ist

Einige Cross-Browser um inline-block Attribut anzeigen: https://css-tricks.com/snippets/css/cross-browser-inline-block/

Sie können einige Tests mit diesem Attribut in sehen: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Answer 2

Eine funktionierende Demo finden Sie 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>

Answer 3

Meine CSS3-Flexbox-Lösung in zwei Geschmacksrichtungen: Das obere verhält sich wie ein span und das untere wie ein div, das die gesamte Breite mit Hilfe eines Wrappers einnimmt. Ihre Klassen sind "top", "bottom" und "bottomwrapper" jeweils.

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.

Answer 4

Versuchen Sie display: inline-block; . Damit sie browserübergreifend kompatibel ist, verwenden Sie bitte den unten stehenden 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>

Answer 5

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

Dadurch wird die Breite des übergeordneten Divs gleich der Breite des größten Elements.