4 DIV song song không xếp thẳng hàng với 3 màn hình DIV cạnh nhau trên các màn hình nhỏ hơn

Question

Được rồi, tôi sẽ cố gắng làm điều này càng rõ ràng càng tốt.

Tôi có 4 DIV ở cạnh nhau khi trang có chiều rộng đầy đủ. Bên dưới là có 4 DIV khác có cùng kích thước và mọi thứ như sau:
| | | |
| | | |
Khi làm cho màn hình nhỏ hơn, DIV ở bên phải sẽ đi xuống để có 3 DIV ở cạnh nhau và 3 DIV ở cạnh nhau bên dưới vv .. như thế này:
| | |
| | |
Bây giờ vì một số lý do này sẽ không hoạt động đúng cách, DIV sẽ không hoạt động, nhưng nằm ở bên phải của màn hình như sau:
| | |
    |
| | |
    |

Bên dưới mã đang được sử dụng:

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

Đừng để ý "ID của", họ không được sử dụng ngay bây giờ. Bên dưới CSS đang được sử dụng:

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

Tôi hy vọng điều này làm cho câu hỏi rõ ràng, mọi trợ giúp sẽ được đánh giá cao!

Answer 1

Vấn đề là do chiều cao không nhất quán của các khối cột, chỉ cần thêm mã js này vào tệp của bạn, điều này sẽ làm, nó sẽ cân bằng tất cả chiều cao cột dựa trên chiều cao cột lớn nhất theo nội dung của nó.

Điều này phù hợp với tôi, hy vọng nó sẽ giải quyết được vấn đề của bạn.

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