如何使包装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

回答

相关问题