如何相对于内容的div宽度设置无视父母的宽度

Question

我正在寻找一种方法来设置基于封闭的内容的div宽度，而不是继承父母的宽度，对于为例：

<div id="parent" style="width:100px"> 
    <div id="child"> <!-- i want to add css to this div --> 

     <p style="width:200px;"> this s atext</p> 
     <img src="this s an image" style="width:300px;"> 


    </div> 
</div> 

我要的是自动进行的#child 500像素宽，我不想手动设置的#child宽度，因为在我的实际情况，我不知道它的内容的宽度，（请查看下面的评论关于我的情况的详细信息）

注意以下所有的解决方案都没有和我一起工作：

display:inline; 
width:auto; 
overflow:visible; 

你能帮助我吗？

Answer 1

下面是一个可以为你的布局工作的一种方式。

如果HTML如下所示：

<div id="parent" style="width:100px"> 
    <div id="child"> <!-- i want to add css to this div --> 
     <p style="width:200px;">this is text</p> 
     <img src="http://placekitten.com/600/400" style="width:300px;"> 
    </div> 
</div> 

应用以下CSS：

#parent { 
    border: 1px dashed blue; 
} 
#child { 
    background-color: beige; 
    white-space: nowrap; 
} 
#child p { 
    border: 1px dotted blue; 
    display: inline-block; 
    vertical-align: top; 
    margin: 0; 
} 
#child img { 
    border: 1px dotted blue; 
    vertical-align: top; 
} 

边框仅用于例证来说明如何在各种盒子的边缘。

它看起来像你想要两个子元素，p和img在一行上， ，因此总宽度为500px（200px + 300px）。

首先，将display: inline-block应用于p，以便它可以与 图像内嵌。

为了保持p和单行img，你可以申请white-space: nowrap到 的#child包含块。

或者，您可以确保两个元素之间没有空白（例如，换行），但如果内容来自CMS或其他提要，则这可能不可行。

请注意，#child元素占据#parent块的宽度，并且 后代元素相应地溢出。这可能并不理想，但如果需要，可以修复 。

根据您的实际内容，您可能需要将最大宽度设置为#child。

见演示在：http://jsfiddle.net/audetwebdesign/c94Ya/

在Firefox中，结果如下：

Answer 2

它可以设置孩子的div宽度500像素。但它不占用宽度，因为父容器宽度为100px。

如果你想设置为500px的孩子DIV意味着重新改变父DIV 500像素以上500像素当时只有孩子的div将工作风格。

例如

<div id="parent" style="width:100%"> 
    <div id="child" style="width:500px"> <!-- i want to add css to this div --> 

     <p style="width:200px;"> this s atext</p> 
     <img src="this s an image" style="width:300px;"> 


    </div> 
</div> 

在这个例子中我改变母体的CSS宽度100像素到100％

Answer 3

try和使单独的ID通过在你的CSS使用z-index。 从这里它被用来把在彼此的顶部上的对象，而不是由彼此实现CSS

#child { 
width: 500px; 
z-index: 100; 
} 

与z-index高于100设置任何ID将高于子ID。 并且任何设置为z-index的ID都会低于子ID。

Answer 4

当我尝试这样做，红色边框比黑色边框

<div id="parent" style="width:100px;border: 1px solid black"> 
    <div id="child" style="width:500px;border: 1px solid red"> <!-- i want to add css to this div --> 
     <p style="width:200px;"> this s atext</p> 
    </div> 
</div> 

Answer 5

这是你在找什么更广泛？

http://jsfiddle.net/A9xDG/

<div id="parent" style="width:200px; background: red; height: 400px"> 
    <div id="child" style="background: yellow; width: 500px;"> 
     <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, </p> 
     <img src="this s an image" style="width:100px" /> 
     </div> 
</div> 

更新：http://jsfiddle.net/A9xDG/3/