当列数大于5时，css3列在第一行之后留下最后一列未填充

Question

您好我正在学习使用CSS3中的列。 当我向列中的卡添加文本时，当列数超过5时，它会中断。 您可以在第2行的最后一列为空时看到卡片和图像下面的文字。

我的HTML

＆＃13;

＆＃13;

.body-wrapper{
      width: 100%;
      white-space: nowrap;
    }
    .menu-list{
      display: inline-block;
      width: 20%;
      height: 100%;
      padding: 0px;
    }
    .cards{
      white-space: normal;
      width: 100%;
      display: inline-block;
      vertical-align: top;
    }
    #wrapper {
      vertical-align: top;  
      margin: 10px auto;
    }
    #columns {
      -webkit-column-count: 4 ;
      -webkit-column-gap: 15px;
      -webkit-column-fill: auto;
      -moz-column-count: 4  ;
      -moz-column-gap: 15px;
      -moz-column-fill: auto;
      column-count: 4 ;
      column-gap: 15px;
      column-fill: auto;
    }
    
    .pin {
      background: #FEFEFE;
      border: 2px solid #FAFAFA;
      box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
      margin: 0 2px 15px;
      -webkit-column-break-inside: avoid;
      -moz-column-break-inside: avoid;
      column-break-inside: avoid;
      padding: 15px;
      padding-bottom: 5px;
      background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
      opacity: 1;
    
    /*  -webkit-transition: all .2s ease;
      -moz-transition: all .2s ease;
      -o-transition: all .2s ease;
      transition: all .2s ease;*/
    }
    
    .pin img {
      width: 100%;
      height: 200px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 15px;
      margin-bottom: 5px;
    }
    
    .pin p {
      font: 12px/18px Arial, sans-serif;
      color: #333;
      margin: 0;
    }

＆＃13;

<div class='body-wrapper'>
     <div class='menu-list>....</div>
     <div class='cards'> ... </div>
     <div id="wrapper">
      <div id="columns">
       <div class="pin">...</div>
       <div class="pin">...</div>
       <div class="pin">...</div>
      </div>
     </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以使用＆＃34; float：left＆＃34;代替。更简单，更受浏览器的支持。在这种情况下，您需要在第5次之后清除浮动元素：

 .pin
 {
    float:left;
 }

 .pin:nth-child(5n + 1)
 {
    clear:left;
 }

原因是第一个拇指更高，正如你所看到的，第二排浮动元素从这一个的右边开始而不是它。