css - 当列数超过5时，css3列将第一行后的最后一列保留为空

嗨，我正在学习在CSS3中使用列。
当我向列中的卡片添加文本时，列数大于5时，文本会中断。
当第2行的最后一列为空时，您可以在卡片和图片下方看到文本。

我的HTML是

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

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

最佳答案

您可以改用“ float：left”。更简单，并且更受浏览器支持。在这种情况下，您需要在5号之后清除浮动元素：

 .pin
 {
    float:left;
 }

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

原因是第一个拇指较高，并且如您所见，第二行的浮动元素从该元素的右侧开始，而不是在其下方。

关于css - 当列数超过5时，css3列将第一行后的最后一列保留为空，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27616876/