小孩子沒有包裝留在家裏

看看這個小提琴。 http://jsfiddle.net/mstwp/小孩子沒有包裝留在家裏

的HTML是：

<div id="parent" style="width: 150px; display: inline-block; white-space: nowrap"> 

    <div id="one" class="kids"> 
     <span>Hi</span> 
    </div> 

    <div id="two" class="kids"> 
     <span>Bob like to play on his violin</span> 
    </div> 

</div>

與CSS：

#parent { 
    background-color: #aaaaaa 
} 
#one { 
    background-color: #ff0000 
} 

#two { 
    background-color: #00ff00 
} 

.kids { 
    display: inline-block; 
    padding: 2px; 
    white-space: normal; 
}

我怎樣才能讓DIV #two總結前面，這樣我可以保持兩個孩子的div父DIV裏面？

來源

2014-04-26 Erik

只需刪除附加到父級的寬度即可。它強制父div增加其高度以適應div #two中的內容。所以保持父div這樣的：

<div id="parent" style="display: inline-block; white-space: nowrap">

而這應該爲你做的伎倆。

或者，您可以向父級div添加最小高度，以便根據子級內的內容自動調整其寬度。所以你的父div可能看起來像這樣：

<div id="parent" style="min-width: 150px; display: inline-block; white-space: nowrap">

希望這有助於！

編輯：你的孩子divs已經包裝在父div。當您向名爲two的子div添加一個小寬度時，就會「顯示」。

看到，這裏：http://jsfiddle.net/K2xn5/

如果你想你的div two到parent專區內包裝，再有就是在一個固定的寬度連接到parent沒有意義的。相反，您需要爲名爲two的div提供固定寬度。然後這將佔據由內容定義的空間。您的parent div將根據其子女的大小繼續擴展，在這種情況下，div one和two。

查閱這些小提琴：

固定寬度的孩子，沒有寬度父：http://jsfiddle.net/K2xn5/1/

兒童的div包裝本身基於其內容的大小：http://jsfiddle.net/K2xn5/2/和http://jsfiddle.net/K2xn5/3/

希望這幫助！

來源

2014-04-26 00:16:49

如果我從父去除寬度，那麼它的大小沒有家長包裝，以適應一切。這不是我想要的。 – Erik

@Erik請參閱編輯。我想這應該可以解決你的問題。 –

好的，我可以用它來改變我的方法，使其工作。我曾經假設孩子div的大小會隨着它的大小而變化，再加上其兄弟姐妹的大小與父母的大小相符。但它看起來像是當它的尺寸是父代大小的100％時包裝。我可以在子項上設置％寬度，以便在文本換行時它們都保留在父項內。 – Erik