html - 在较小的屏幕上，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

问题是由于列 block 的高度不一致，只需在您的文件中添加此 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>