如何相對於內容的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/