Html div是否标记自动包装子项

我正在测试如何制作响应性设计UI。出现了这个问题。我认为div的默认行为是包装子项，它们的总宽度成为div的宽度

链接到JSFIDLE:

在上述示例中，请参见搜索区域。这个div的宽度应该与内部文本框和搜索框一致。但是它采用的HTML标记的宽度是1280 px。W

  #search_area{
            height: 100%;
            position:relative;
            left:50%;
            top:20%;
           }

为什么会发生这种特殊错误。一个暗示对我有帮助

提前谢谢。下面是问题的屏幕截图

你的css

#header_area{
 background:#B50E24;
 width:100%;
 height:10%;
}

您已指定宽度：100%，因此它将占据100%的宽度

---

除此之外，

是一个

块

元素<代码>块元素采用全部可用宽度。如果您希望它仅包装整个内容，请给出

display:inline block

否否，使用firebug或任何其他检查器检查您的元素。因此，我已发布了问题。另外，我现在也添加了相同的屏幕截图。请查收。firefox和IEF都出现了这种情况，只是为了澄清一下，默认情况下div将扩展最大可用宽度，即使只有200px的孩子？原因是它被设置为默认显示：block？block元素是占用可用全宽度的元素，前后都有一个换行符-