在＆amp;之前删除空格在浮动元素之后

Question

浮动元素应该并排（作为列）。但是，如果我们必须将一些浮动元素推到其他浮点元素下面，它会创建一些空格。我在谈论这种可能发生的结构：

<div class="row clearfix">
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
</div>

考虑CSS：

@media screen and (max-width: 991px) {
   .col { 
      width: 50%;
 }

}

在那种情况下，这将发生（＆lt; 992px屏幕）：

我不想要那个额外的差距。我想要这个：

如何删除额外空间而不更改HTML 的结构？

Fiddle demo

Answer 1

当我尝试它的小提琴时，因为你加入宽度50％的百分比 如果符合要求，可以将其切换为静态像素数。

我只是切换

@media screen and (max-width: 991px) {
   .col { 
      width: 50%;
 }

带

@media screen and (max-width: 991px) {
  .col {
    width: 250px;
    height: 250px;
  }

Find Edit Here

Answer 2

您可以在页面加载和窗口调整大小时使用此JQuery代码：

$('.col').each(function(i, el) {

  if (i % 2 === 0) {

    if ( $(el).height() > $(el).next().height() ) {

      $(el).next().height( $(el).height() );

    } else {

      $(el).height($(el).next().height());

    }

  }

});

{{3}}