一個孩子設置父寬度，一個包裝

Question

在父母給定兩個div如何讓我們定義父寬度並強制另一個包裝？我接受涉及桌面或js的解決方案，但對它們不感興趣。

HTML：

<div class="parent"> 
<div class="header">This should not wrap</div> 
<div class="text">This should wrap to the header's width. This should not cause the parent to grow.</div> 
</div> 

CSS：

.parent { 
    display: inline-block; 
    border-style: solid; 
    border-width: 1px; 
} 
.header { 
    white-space:nowrap; 
} 
.text { 
    /*what goes here?*/ 
} 

jsfiddle

Answer 1

我相信你正在尋找如下：

HTML

<div class="parent"> 
    <div class="header">This should not wrap</div> 
    <div class="text">This should wrap to the header's width. This should not cause the parent to grow.</div> 
</div> 

CSS

.parent { 
    display: inline-block; 
    border-style: solid; 
    border-width: 1px; 
} 
.parent > .header { 
    width: auto; 
    display:inline-block; 
} 

的jQuery

$(document).ready(function() { 
    $('.text').width($('.header').width()); 
}); 

我使用的位的jQuery設置.text類的寬度，成爲相同的寬度.header類。在此之前，我使用上面的CSS代碼將.parent的寬度設置爲.header的寬度。

DEMO JSFiddle