4個並排的DIV在較小的屏幕上不對齊爲3個並排的DIV

Question

好的，我會盡量使這個儘可能清楚。

當頁面爲全角時，我有4個DIV彼此相鄰。下面還有另外4個尺寸相同的DIV，像這樣：
| | | |
| | | |
當屏幕變小時，右側的DIV應該向下，所以會有3個DIV彼此相鄰，並且3個DIV彼此相鄰，如下所示：
| | |
| | |
現在由於某些原因，這將無法正常工作，DIV確實下降，但像這樣站在屏幕的右側：
| | |
    |
| | |
    |

下面的代碼中使用：

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

不介意 「的ID」，他們現在還沒有使用。正在使用的CSS下面：

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

我希望這使問題明確，任何幫助將不勝感激！

Answer 1

問題是由於列塊的高度不一致，只需將這個js代碼添加到您的文件中，這將執行什麼操作，它將基於最大列的高度根據其內容均衡所有列高度。

這對我很好，希望它能解決您的問題。

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