Div宽度= 100％？

Question

我有JS生成的内容，并且想要一个完全围绕它的div。

我不知道为什么，但div父母总是100％宽。

我以为我有div宽度：100％某处，但令人惊讶的是它在jsfiddle看起来几乎相同：

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

那么为什么外部div总是100％宽？以及如何解决这个问题？我尝试使用display：inline，但它将width设置为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宽度（宽度：xxxpx），因为所有内容都是动态创建的。

Answer 1

听起来你需要阅读Visual Formatting Model。

display: block;会导致块级项目自动填充其父容器。

CSS的设计方式适合填充父母的子元素，而不是符合孩子的父母。

Answer 2

div是块元素。 如果未指定width，则块元素是父元素的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