4 DIV side-by-side non allineati come 3 DIV side-by-side su schermi più piccoli

Question

OK, cercherò di renderlo il più chiaro possibile.

Ho 4 DIV uno accanto all'altro quando la pagina è a tutta larghezza. Sotto ci sono altri 4 DIV con le stesse dimensioni e tutto questo:
| | | |
| | | |
Quando si riduce lo schermo, il DIV a destra dovrebbe scendere, quindi ci saranno 3 DIV uno accanto all'altro e 3 DIV uno di seguito all'altro ecc. Come questo:
| | |
| | |
Ora per qualche motivo questo non funzionerà correttamente, il DIV si spegnerà, ma si trova sulla destra dello schermo in questo modo:
| | |
    |
| | |
    |

sotto il codice in uso:

<div class="cblock highlights i2three-highlights-news" id=""> 
<div class="inner clearfix"> 
    <div class="highlight" id=""> 
     <div class="el-inner"> 
      <div class="desc-news"> 
       <div class="image-news"><a href="newsdetail.php"><img src="images/newsholder.png" alt="" /></a></div> 
       <div class="title">Vacature medewerker webshop</div> 
       <div class="text"><p> and St. Maarten.&nbsp;</p>     <div class="learn-more-news">LEARN MORE</div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="highlight" id=""> 
     <div class="el-inner"> 
      <div class="desc-news"> 
       <div class="image-news"><a href="newsdetail.php"><img src="images/newsholder.png" alt="" /></a></div> 
       <div class="title">Bay West Racingteam in action at the ESSF 2014</div> 
       <div class="text"><p> and St. Maarten.&nbsp;</p> 
       <div class="learn-more-news">LEARN MORE</div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="highlight" id=""> 
     <div class="el-inner"> 
      <div class="desc-news"> 
       <div class="image-news"><a href="newsdetail.php"><img src="images/newsholder.png" alt="" /></a></div> 
       <div class="title">Vacature medewerker debiteurenbeheer</div> 
       <div class="text"><p> and St. Maarten.&nbsp;</p>     <div class="learn-more-news">LEARN MORE</div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="highlight" id=""> 
     <div class="el-inner"> 
      <div class="desc-news"> 
       <div class="image-news"><a href="newsdetail.php"><img src="images/newsholder.png" alt="" /></a></div> 
       <div class="title">Vacature medewerker webshop</div> 
       <div class="text"><p> and St. Maarten.&nbsp;</p>     <div class="learn-more-news">LEARN MORE</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

non ti dispiace il "ID di", non vengono utilizzati in questo momento. Sotto il CSS in uso:

.highlights .highlight { 
    float: left; 
    text-align: center;} 

.i2three-highlights-news {margin: auto; width:90%; background-color:white;} 
.i2three-highlights-news .highlight {width: 300px; margin-left: 10px;} 
.i2three-highlights-news .highlight:first-child {margin-left: 0;} 
.i2three-highlights-news .highlight .el-inner {padding: 0 10px 0 0; } 
.i2three-highlights-news .highlight .title, .i2three-highlights-news .highlight .title a {font-family:"Open Sans Light" 'Vollkorn', sans-serif; color: #174f6e; font-size: 24px; line-height: 1; font-weight: bold; height: 63px; margin-bottom: 20px;} 
.i2three-highlights-news .highlight .title:after {width: 20px; height: 1px; display: block; content: ""; position: absolute; bottom: 0; left: 0;} 
.i2three-highlights-news .highlight .text a {font-size: 15px; line-height: 21px; margin: 0 0 20px; color: #3e4856} 
.highlights .highlight .image-news{width:auto; height:auto; margin-left:auto; margin-right:auto; margin-bottom:5%; border:1px solid #d1e6f7} 
.hightlights .hightlight .extra-images-product{width:50px; height:50px; background-color:red;} 
.extra-img{float:left; margin-left:13%;margin-top:5%;margin-bottom:5%;} 
.desc-news {width:300px; height:auto; margin:auto; margin-bottom:10%;} 
.highlights-news{ color: #00376D;display:block; width:100%; margin-bottom:2%;} 
.learn-more-news{text-decoration:underline;} 

Spero che questo chiarisca la domanda, qualsiasi aiuto sarebbe apprezzato!

Answer 1

Il problema è dovuto all'altezza incoerente dei blocchi di colonne. Basta aggiungere questo codice js nel file, ciò che farà, equalizzerà tutte le colonne in base all'altezza della colonna più grande in base al suo contenuto.

Questo funziona per me, spero che risolva il problema.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<script> 
    $(document).ready(function(){ 

    var highestBox = 0; 
     $('.highlights .highlight').each(function(){ 
       if($(this).height() > highestBox){ 
       highestBox = $(this).height(); 
     } 
    });  
    $('.highlights .highlight').height(highestBox); 

}); 
</script>