css - 自动调整 div 以适应流体内容

Question

我正在设计一个流畅的页面，它需要:

父级:80%(屏幕)容器包含 x 个图像，宽度:10%，向左浮动。容器需要自动调整为与内容一样宽，最大宽度为父级的 50%。

我尝试了不同的技术来将显示设置为内联 block ，并在此处附加了 jsfiddle。 http://jsfiddle.net/7D9XS/

#parent
{
    width: 80%;
}

#container {
    max-width:50%;
    border:solid 1px red;
    display:inline-block;
}

.uploadItemPreviewThumbDiv
{

    width: 20%;
    margin: 10px;
    background: cyan;
    float:left;
}


.uploadItemPreviewThumbDiv img {
    width:100%;
}

Answer 1

好的，给你...

.uploadItemPreviewThumbDiv
{
    width: 70px;
    margin: 10px;
    background: cyan;
    float:left;
}

JSFiddle!

请记住，这里的问题是整个谈话都是以百分比进行的。百分比往往是您在开发响应式设计时可能遇到的最不可靠的事情之一，并且在旁注中，如果我是你，我会使用像 Isotope 或 http://mixitup.io/ 这样的 jquery 插件

是的，据我所知，也许有人可以更清楚地解释安静......