jquery - 容器中的瓷砖从上到下而不是从左到右

Question

我想让瓷砖/缩略图像这样从上到下显示：

当我只是将瓷砖放在容器内时，它不会像 float:left 那样工作以适应容器然后下一行。在这种情况下，瓷砖（红色）刚好在容器（黑色）之外。

CODEPEN 示例

Answer 1

您需要在容器上设置宽度，这样它将限制框。通过这样做，它允许您float: left;在较小的盒子上进行设置。

编辑：更新链接：http ://codepen.io/seraphzz/pen/boxtq

Answer 2

如果瓷砖保持相同的高度，那么您可以采用这种策略。它不需要额外的 .col 标记，但它需要您定义哪个标记位于顶部。我现在正在工作，所以我无法访问 JSfiddle。这适用于 IE7，所以我确信它会在 FF 和其他符合标准的浏览器中工作（更好？）。

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
 <div class="top">6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
 <div class="top">11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
 <div class="top">16</div>
  <div>17</div>
  <div>18</div>
  <div>19</div>
  <div>20</div>
</div>

.wrapper {
    background: #f1f1f1;
    overflow: hidden;
    width: 520px;
    padding: 0 10px 10px 0;
}
.wrapper div {
    float: left;
    clear: left;
    width: 80px;
    height: 60px;
    margin: 10px 0 0 10px;
    border: 5px solid #808080;
}
.wrapper div.top {
    clear: none;
    margin-top: -310px;
}
.wrapper div.top + div {
    clear: none;
    margin-top: -230px;
}
.wrapper div.top + div + div {
    clear: none;
    margin-top: -150px;
}
.wrapper div.top + div + div + div {
    clear: none;
    margin-top: -70px;
}
.wrapper div.top + div + div + div + div {
    clear: none;
}