如何使包裝div只包含非溢出的div

我有一個div包含divs的內容。外部div有一個動態寬度（例如80％）。內部div的固定寬度（例如100px）。如何使包裝div只包含非溢出的div

的問題是，我想說明的只有這麼多內心的div所以沒有內格「溢出」 /「切斷」，如圖1

我也想「分配」的「自由」空間內的div之間的餘量均勻分佈，如圖2

我希望有人明白我的問題，並知道如何使用CSS意識到這一點，作爲少的javascript儘可能:)

Example Image

PS：If這很容易做到，有可能有第一個和最後一個div有一個最大值。邊緣的邊界？

來源

2012-12-12 Nick Russler

我認爲你應該使用'display：inline-block'併爲容器設置一個高度和一個'overflow：hidden' – EricG

是否有固定的div數（例如3）？因爲DOM元素的動態創建聽起來像JavaScript。 – David

有一個固定的數字，因爲外部div有一個最大寬度 –

在你用更多的信息編輯你的問題之前開始這個，但我相信你所追求的那個缺失的部分是'外部'中的text-align: justify。

.outer{ 
    background: red; 
    width: 80%; 
    overflow: hidden; 
    height: 48px; 
    text-align: justify; 
} 

.inner{ 
    background: blue; 
    width: 100px; 
    height: 40px; 
    margin: 4px; 
    display: inline-block; 
}

Here's a fiddle.

不能完全確定你的最大利潤是什麼意思，但它聽起來像，可以通過給容器上的左側和右側的固定填充來實現。

來源

2012-12-12 19:36:31 DigTheDoug

你做它exaclty，因爲我的意思:)謝謝！ –

如何使包裝div只包含非溢出的div

回答

相關問題