瓷砖从上到下不在容器中从左到右

Question

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

当我把瓷砖放在容器里面时，它不像浮子一样工作：左边适合容器然后下一行。 在这种情况下，瓷砖（红色）只是在容器外面（黑色）。

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