Mache die Breite des äußeren div so, dass sie automatisch in die inneren divs passt

Question

Ich habe 2 innere divs in einem äußeren div, und ich möchte das äußere div automatisch an die Breite der divs anpassen. Ist das möglich?

body { 
 
    font-size: 0; 
 
} 
 
#outer { 
 
    border: 1px solid black; 
 
} 
 
.inner { 
 
    font-size: 12px; 
 
    display: inline-block; 
 
    border: 1px solid red; 
 
}

<div id='outer'> 
 
    <div class='inner'>text1</div> 
 
    <div class='inner'>text2</div> 
 
</div>

Answer 1

Ihr outer div ist ein Blockelement. Sie müssen es zu einem Inline-Level-Element machen. Inline Elemente nehmen automatisch die Größe des enthaltenen Inhalts an. In Bezug auf die Frage, die Sie haben gefragt, gerade Einstellung:

display: inline-block 

auf Ihrem äußeren div den Trick. Sehen Sie den Code-Snippet für die Demo:

body { 
 
     font-size: 0; 
 
    } 
 
    #outer { 
 
     border: 1px solid black; 
 
     display: inline-block; 
 
    } 
 
    .inner { 
 
     font-size: 12px; 
 
     display: inline-block; 
 
     border: 1px solid red; 
 
    }

<div id='outer'> 
 

 
    <div class='inner'> 
 
    text1 
 
    </div> 
 
    <div class='inner'> 
 
    text2 
 
    </div> 
 

 
</div>

hoffe, das hilft !!!

Answer 2

Hinzufügen "display: table;" zum #outer css:

Zum Beispiel:

#outer { 
    border: 1px solid black; 
    display: table; 
} 

mit Anzeige: Wenn Sie position:absolute; oder float:left;-#outer hinzufügen Tabelle als mit Inline-

Answer 3

weniger aufdringlich ist, wird es der Größe der beiden inneren div ist es. Für diesen Fall würde ich den float verwenden. Floats sind im Allgemeinen besser für Inhalte, die sich im Laufe der Zeit ändern oder erweitern/verkleinern können, während absolute positioning außerhalb des Dokumentenflusses oder der Struktur des Dokuments verwendet werden sollte, wie eine Navigationsleiste.

Edit: Wenn Sie andere Elemente nicht unter funktioniert geschrieben um den äußeren div die display:inline-block Methode zu fließen, aber wenn Sie Elemente haben möchten Sie umfließen #outer dann float:left wäre der Weg zu gehen. Angenommen, Sie haben #outer als 50% der Breite und wollen etwas anderes auf der anderen Hälfte der Seite mit display:inline-block werden andere Elemente unter #outer setzen.

CodePen link to show difference