是否可以以递增的方式调整div大小？

Question

我有一个居中的div，其中包含浮动元素，每个元素具有相同的高度和宽度并且是浮动的。调整div的大小时，右侧总会有一个空隙，没有足够的空间来容纳另一个元素。我想要的是div只有当它可以适合另一个元素时才会扩展，而不仅仅是在那里有空间。那可能吗？

Answer 1

CSS3解决方案

使用一些@media查询调用（因此对可能想要的大小有实际限制），在CSS3浏览器上产生了良好的结果。请参阅this fiddle（full screen），它使用此代码（仅作为示例）：

<强> HTML

<ul class="container">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul> 

<强> CSS

@media screen and (min-width: 122px) {
  .container {width: 120px;}
}

@media screen and (min-width: 242px) {
  .container {width: 240px;}
}

@media screen and (min-width: 362px) {
  .container {width: 360px;}
}

@media screen and (min-width: 482px) {
  .container {width: 480px;}
}

@media screen and (min-width: 602px) { 
  .container {width: 600px;}
}

/* you need to decide just how far to take it */

.container {
    margin: 10px auto;
    overflow: hidden;
    border: 1px solid red;
    height: 210px;
}

li {
    width: 100px;
    height: 50px;
    background: cyan;
    float: left;
    margin: 10px;
}

此外，您或其他用户可能会找到this helpful。

Answer 2

您似乎正在寻找与Masonry类似的功能。这与Pinterest使用的Pinterest（如果不是 插件）具有相同的结构。

我认为它不仅限于形状奇特的元素，所以应该完美地运作。