跨浏览器方法使子div适合其父级宽度

Question

我正在寻找一个解决方案，让孩子div适合父母的width。

我在这里看到的大多数解决方案都不是跨浏览器兼容的（例如，display: table-cell;中不支持<=8。

Answer 1

解决方案是不要声明width: 100%。

默认值为width: auto，对于块级元素（例如div），无论如何都会使用“完整空间”（与width: 100%的方式不同）。

请参阅： http://jsfiddle.net/U7PhY/2/

以防万一我的回答尚不清楚：只是不要在孩子width上设置div。

您可以改为be interested in box-sizing: border-box。

Answer 2

您可以使用box-sizing css属性，它的crossbrowser（ie8 +，以及所有真正的浏览器）以及针对此类情况的非常好的解决方案：

#childDiv{
   box-sizing: border-box;
   width: 100%; //or any percentage width you want
   padding: 50px;
}

Fiddle

Answer 3

如果将position:relative;放在外部元素上，则内部元素将根据此元素放置。然后内部元素上的width:auto;将与外部元素的宽度相同。

Answer 4

在你的照片中，你将衬垫放在孩子外面。不是这种情况。填充会增加元素的宽度，因此如果添加填充并使其宽度为100％，则宽度为100％+填充。为了你想要的东西，你只需要在父div中添加填充，或者在内部div中添加一个边距。由于div是块级元素，因此它们将自动扩展到其父级的宽度。

Answer 5

您的孩子div甚至不需要width: 100%：

http://jsfiddle.net/DanielDZC/w2mev/1/

Answer 6

如果你想使用那个填充空间......那么这里有一些东西：

http://jsfiddle.net/qD4zd/

所有颜色都是背景颜色。