Whitespace vor und nach Float-Element entfernen

Question

Float-Elemente sollen nebeneinander (als Spalte) bleiben. Aber wenn wir einige Float-Elemente unter andere Float-Elemente schieben müssen, werden einige Leerzeichen erzeugt. Ich spreche von dieser Struktur, wo es passiert ist:

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

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

}

In diesem Szenario wird das (< 992px Bildschirm) passiert werden:

Ich bin nicht wan t diese zusätzliche Lücke. Ich möchte dies:

Wie den zusätzlichen Platz zu entfernen, ohne die Struktur von HTML zu ändern?

Fiddle demo

Answer 1

, wie ich auf der Geige versuchen, seinen wegen der Prozentsatz% Sie 50% Breite hinzugefügt Sie es zu statischer Anzahl von Pixeln wechseln können, wenn diese mit den Anforderungen arbeiten.

i-Schalter nur

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

mit

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

Find Edit Here

Answer 2

Sie diesen JQuery-Code auf Seite laden und Fenster Resize verwenden:

$('.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()); 

    } 

    } 

}); 

https://jsfiddle.net/fabio1983/nhj1x1br/3/