小屏幕下，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;}

我希望这样能使问题更加清晰，非常感谢您的任何帮助！

- Stefan Neuenschwander

---

你的第四个元素在一个.highlight元素之前"_卡住了"，因为该元素比它后面的元素更高。 - hungerstar

你是对的，设置了highestbox函数后它确实工作了 :) 不过还是谢谢啦！ - Stefan Neuenschwander

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>

- CreativePS

---

非常感谢！那段代码完全符合我的要求，干杯！ - Stefan Neuenschwander

太棒了，当事情对我们起作用时感觉很好，但当类似的事情也为他人工作时，感觉真的很棒。 :) - CreativePS