Question

为什么当div是身体的直接孩子时，div会填充身体宽度？

这可能是一个简单的问题，但我找不到答案。也许是因为大量的问题和相反的教程（得到一个div来填充一个区域）。

这是一个小提琴来演示我的意思：http://jsfiddle.net/xr9mc8n5/

<head>
    <style>
        #container { background-color: #ffcc99; }
    </style>
</head>
<body>
    <div id='container'>
        CONTENT
    </div>
</body>

div需要根据内容调整自身大小，并且不能有固定的px或％宽度。请不要使用JavaScript给出答案，我需要一个纯CSS解决方案。

也许我忘了一些基本的东西，但我尝试过的一切都没有效果。非常感谢任何帮助和见解！

Answer 1

div的默认display样式为block。

您可以使用display:inline或使用span标记代替，这会导致div / span仅覆盖“需要”的宽度。

Answer 2

这是由于CSS Box Model 的固有特性，特别是属性display: block;，这是<div>的固有显示值元件。

要解决此问题，只需将div设置为display: inline;或display: inline-block;即可。这将导致您的div仅与其内容一样宽。

Answer 3

Div是块级元素，因此它们占据了文档中的完整一行。默认情况下，他们填充容器。你将不得不设置一个额外的容器。另外的容器需要设置为内联而不是块。红色等级的div仍然让你可以全面控制不断增长的div。

此处：http://jsfiddle.net/d4hzujfq/

<body>
<div class="red"> 
    <div class="inline blue">Content when you add more it grows</div>

</div>
</body>

版

为什么身体的直接孩子的div填充它的宽度？你怎么能阻止它呢？

3 个答案: