Ширина деления = 100%?

Question

У меня есть контент, сгенерированный JS, и я хочу, чтобы div точно его окружал.

Я не знаю почему, но div-родитель всегда имеет ширину 100%.

Я думал, что у меня есть ширина div: где-то 100%, но на удивление это выглядит почти одинаково в jsfiddle:

http://jsfiddle.net/f2BXx/2/

Так почему же внешний div всегда имеет ширину 100%? И как это исправить? Я пытался с display: inline, но он устанавливает ширину 0px; /

CSS:

.outer {
    border: solid 1px red;
}

.item {
    height: 300px;
    width: 400px;
    border: solid 1px blue;
}

.allright {
    height: 300px;
    width: 400px;
    border: solid 1px blue;
    outline: solid 1px red;
}

HTML:

<p>I don't know where "outer" div 100% width comes from?</p>

<div class="outer">
 <div class="item">
     <p>Something big!</p>
 </div>
</div>

I always thought it'd look like that:

<div class="allright"></div>

Я не могу установить внешнюю ширину div (width: xxxpx), потому что все содержимое создается динамически.

Answer 1

Похоже, вам нужно прочитать Модель визуального форматирования .

display: block; заставляет элементы уровня блока автоматически заполнять родительский контейнер.

CSS разработан таким образом, чтобы подражать дочерним элементам, заполняющим их родителей, а не родителям, соответствующим детям.

Answer 2

div - это блочный элемент.Блочные элементы имеют ширину родительского элемента 100%, если ширина не указана.

Answer 3

он занимает все доступное пространство в зависимости от родительского контейнера, именно то, что он должен делатьЕсли вы хотите, чтобы это была определенная ширина, установите ширину :;элемента.

Answer 4

Если вы находите документацию w3.org несколько сухой или слишком технической, вот более доступное объяснение блочной модели CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model