Question

我正在设计一个流动页面，需要：

父母：80％（屏幕）容器包含x个图像，宽度：10％，向左浮动。容器需要自动调整为内容宽度，最大宽度为父级的50％。

我尝试过不同的技术将显示设置为内联块，并在此处附加了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插件

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

Answer 2

好的让我试着这样说吧......

这是一种悖论，你的条件是......

您希望您的内容（内容）具有一定的百分比容器的宽度。
但与此同时，您不想指定容器的宽度究竟是什么。
因为您希望容器“自动调整为与内容一样宽”
这又让我们回到了第一点。

就像'容器'和'内部元素'都在争论谁应该承担一个特定宽度 First 的责任，并且每个人都在讲述另一个是达到一个特定的宽度，这样他自己就可以根据这个来调整自己的宽度。

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

2 个答案: