如何擴大比父母大的div

我正在製作基於瀏覽器的視頻遊戲。在遊戲中，對象有一個圖形和一個標題欄。標題欄保存他們的名字，他們正在施放的法術，施法完成％以及法術圖標。對象具有由服務器確定的大小（尺寸）。如何擴大比父母大的div

我想將標題欄附加到對象。我想讓標題欄顯示圖標，並將拼寫名稱與內聯。如果拼寫圖標寬度+拼寫名稱寬度>對象寬度，我想水平拉伸標題欄（最好居中放置在對象上）

我目前看到的行爲是拼寫名稱將保持內聯直到拼寫名稱寬度+拼寫圖標寬度>對象寬度，此時名稱將出現在下一行，而不是拉伸標題欄（如果不是較大，我不會嘗試居中）。

解決方案可能包含javascript，因爲遊戲循環將使用javascript更新對象，包括位置，大小，圖形，拼寫圖標，拼寫名稱和投射完成百分比。

「supercontainer」是對象。「容器」是標題欄。因此，當「第一」和「第二」足夠大時，我希望「容器」擴大到「超容器」的寬度。「第一個」的大小是固定的，因爲所有的法術圖標都是相同的大小。

<div class="supercontainer"> 
    <div class="container"> 
    <div class="first"></div> 
    <div class="second">Words are long</div> 
    </div> 
</div>

的CSS

.supercontainer { 
    position: absolute; 
    left: 10px; /* example */ 
    top: 10px; /* example */ 
    width: 64px; 
    height: 64px; 
    background-color: black; 
} 

.container { 
    min-width:100px; 
    background-color: red; 
} 

.first { 
    height: 20px; 
    width: 20px; 
    background-color: blue; 
    display: inline-block; 
} 

.second { 
    background-color: green; 
    display: inline-block; 
}

這裏是一個的jsfiddle鏈接：http://jsfiddle.net/ch901rL2/3/

來源

2015-12-06 Zach Taylor

把'white-space：nowrap;'放在'.second'上 – Jay

更改像你container CSS規則下面將保留其子女在1號線。

.container { 
    min-width:100px; 
    background-color: red; 
    white-space: nowrap; 
    display: inline-block; /* this make containter grow with children */ 
}

來源

2015-12-06 21:14:08 LGSon

這會導致孩子坐在一起，但不會使父母變大。我在標題欄周圍有一個邊框，我想要居中，因此標題欄必須展開。 –

@ ZachTaylor更新了我的回答 – LGSon

嘗試改變您.container的元素添加到：

.container { 
    min-width:100px; 
    background-color: red; 
    display: inline-block; //adding this will allow it to grow according to the text 
}

此外，添加white-space: no-wrap;到所需要的元素，如.second。

來源

2015-12-06 21:18:54

只要「空白：nowrap;」是在.container，而不是。第二 –

好添加有扎克，感謝您的提示！ –

如何擴大比父母大的div

回答

相關問題