logo标签列表

Div宽度=100%？

csshtmlwidth
7
我有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），因为所有的内容都是动态创建的。
4个回答
16

听起来你需要阅读可视化格式模型。

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

CSS的设计方式使得子元素填充其父元素，而不是父元素适应子元素。

9
是块级元素。 如果未指定宽度，块级元素将占据父元素的100％宽度。
1

根据其父容器，它占用了所有可用空间，正是它应该做的。如果您希望它具有特定的宽度，请设置元素的width:;。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接