拉伸/缩小父div以适合内容的宽度

时间:2013-08-12 20:49:06

标签: css html width parent children

我正在努力使div的宽度与内容一样宽。这是一个显示我的意思的小问题:

http://jsfiddle.net/djxpU/

我希望蓝色区域与白色一样宽。我尝试了float:leftdisplay:inline-block,但它们无法与position:absolute;一起使用。任何解决方法?

3 个答案:

答案 0 :(得分:1)

块级元素实际上是自然地这样做的。你遇到的问题是,绝对定位元素被取出正常流量,所以块不能包裹你的白盒子。

您是否有理由将它们置于绝对位置?

编辑:如果您只想让白框居中,请转到:http://jsfiddle.net/Marconius/djxpU/1/

代码(因为我必须):margin: 0 auto;

答案 1 :(得分:1)

如果您希望白色区域适合蓝色父级,则将白色的宽度设置为100%#X{ width:100%; }

答案 2 :(得分:0)

默认情况下,div将是其父级的宽度,并将显示为块。以下是填充可用空间的div的示例,同时仍保持左边距。

将此应用于“X”div:{ margin-left: 120px; height: 40px; background-color: white;}

http://jsfiddle.net/yz3Dk/