Div width = 100％？ [英] Div width = 100%?

问题描述

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

p>

我想我有div宽度：100％，但令人惊讶的是它在jsfiddle中几乎相同：

a href =http://jsfiddle.net/f2BXx/2/> http://jsfiddle.net/f2BXx/2/

所以为什么外div总是100％宽？如何解决这个问题？我尝试与显示：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>我不知道outerdiv 100％宽度来自哪里？< / p> 
 
< div class =outer> 
< div class =item> 
< p>有点大！< / p> 
< / div> 
< / div> 
 
我一直认为它看起来像这样：
 
< div class =allright>< / div> 
  

我无法设置外部div宽度（width：xxxpx），因为所有内容都是动态创建的。

解决方案

听起来你需要阅读 以自动填充其父容器。

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

I have JS generated content and want a div EXACTLY around it.

I don't know why, but the div parent is always 100% wide.

I thought I have div width: 100% somewhere, but surprisingly it looks almost the same in jsfiddle:

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

So why the outer div is always 100% wide? And how to fix that? I was trying with display: inline, but it sets width to 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>

I can't set outer div width (width: xxxpx) because all the content is dynamically created.

解决方案

It sounds like you need to read the Visual Formatting Model.

display: block; causes block-level items to automatically fill their parent container.

CSS is designed in a way that lends itself to the child elements filling their parents, rather than the parents conforming to the children.

这篇关于Div width = 100％？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！