Сделайте ширину внешнего div, чтобы он соответствовал внутренним divs автоматически

Question

У меня есть 2 внутренних divs внутри внешнего div, и я хочу, чтобы внешний div автоматически соответствовал ширине внутренних div. Это возможно?

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

Ваш outer ДИВ является элементом блочным. Вы должны сделать его элементом линейного уровня. Элементы Inline автоматически принимают размер содержимого, который он содержит. Что касается вопроса, который вы задали, просто установите:

display: inline-block 

на вашем внешнем div сделает трюк. Смотрите фрагмент кода ниже для демо:

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>

Надеется, что это помогает !!!

Answer 2

Добавить «display: table;» к #outer CSS:

Например:

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

с помощью дисплея: таблица менее навязчивая, как с помощью инлайн

Answer 3

Если добавить position:absolute; или float:left; к #outer она будет размер в два внутренних div «s. Для этого примера я бы использовал float. Floats, как правило, лучше для контента, который может меняться или расширяться/сокращаться с изменениями с течением времени, тогда как absolute positioning следует использовать вне потока документов или структуры документа, например, на панели навигации.

Edit: Если вам не нужны другие элементы обтекают наружную divdisplay:inline-block метода размещен ниже будет работать, но если у вас есть элементы, которые вы хотите, чтобы поток вокруг #outer тогда float:left будет путь. Скажем, у вас есть #outer как 50% от ширины и хотите что-то еще на другой половине страницы, используя display:inline-block, поместите другие элементы ниже #outer.

CodePen link to show difference