3

我有一个包含内容的 div 的 div。外部 div 具有动态宽度（例如 80%）。内部 div 具有固定的宽度（例如 100 像素）。

问题是我只想显示这么多的内部 div，以便没有内部 div“溢出”/“被剪切”，如图 1 所示。

我还想将“自由”空间“分配”为均匀分布的内部 div 之间的边距，如图 2 所示。

我希望有人理解我的问题，并且知道如何使用 css 和尽可能少的 javascript 来实现这一点:)

示例图像

PS：如果很容易做到，是否可以让第一个和最后一个div有一个最大值。外边界的边距？

4

1 回答 1

1

在您使用更多信息编辑问题之前开始此操作，但我相信您所追求的缺失部分是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;
}​

这是一个小提琴。

不完全确定你所说的 max-margin 是什么意思，但听起来这可以通过在容器的左侧和右侧给容器一个固定的填充来实现。

于 2012-12-12T19:36:31.057 回答