jquery - 是否可以增量调整 div 大小？

Question

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

Answer 1

CSS3 解决方案

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

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;
}

此外，您或其他用户可能会觉得这很有帮助。

Answer 2

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

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