Html “中的浮动项目”；画廊“；以随机浏览器宽度将布局打断到下一行

我有一组六个百分比宽度的框，每行显示三个。它们向左浮动，大小相同，但在看似随机的浏览器宽度下，第四个项目一直向右浮动，最后两个项目向下推到第三行。每个图像的标记都是相同的，并且图像的大小都是相同的，所以我不确定是什么导致了这种情况。页面已存在。当你调整浏览器宽度时，你会明白我的意思

以下是HTML：

<div class="large-12 columns">
            <div class="promoItem"> 
                <img src="img/promo/groupFitness.jpg">
                <div class="colorBG"></div>
                <div class="promoLabel">Group Fitness Classes</div>
            </div>

            <div class="promoItem"> 
                <img src="img/promo/mealPlans.jpg">
                <div class="colorBG"></div>
                <div class="promoLabel">Custom Meal Plans</div>
            </div>

            <div class="promoItem"> 
                <img src="img/promo/personalTraining.jpg" />
                <div class="colorBG"></div>
                <div class="promoLabel">Personalized Fitness Plans</div>
            </div>

            <div class="promoItem"> 
                <img src="img/promo/fitnessVideos.jpg">
                <div class="colorBG"></div>
                <div class="promoLabel">Fitness Videos</div>
            </div>

            <div class="promoItem"> 
                <img src="img/promo/healthyRecipes.jpg">
                <div class="colorBG"></div>
                <div class="promoLabel">Healthy Recipes</div>
            </div>

            <div class="promoItem"> 
                <img src="img/promo/emailSignup.png" />
                <div class="colorBG"></div>
                <div class="promoLabel">Join our mailing list</div>
            </div>
        </div>

---

嗯，我不能说这是唯一的解决方案，但我觉得你可以解决这个问题：

看看这个网站，我相信问题在于用于那些

元素的图像的尺寸。资产高度（264px-265px）之间的差异似乎是导致换行的原因。您可以通过以下两种方式解决此问题：

标准化在这些实例中使用的资产的高度。因为你没有太多的图像，这应该不是一个很长的任务-但是如果它们改变了，你必须记住正确的高度来创建新的资产。或者，你可以

…将CSS更改为更灵活一点。这些变化似乎对我有效：

div.promoItem {
    position: relative;
    display: inline-block;
    width: 29%;
    margin: 0 2% 20px 2%;
}

（1-ish px可能的偏离中心应该不明显，但如果出现问题，请将

text align:center

添加到父

）

（编辑）我也注意到了设计的响应性。因此，对于较小的屏幕大小（其中每行元素为2个），您需要将

宽度：46%

更改为大约

宽度：45.5%

。同样，如果上述建议需要，可以将其置于中心位置

---

再说一次，这些只是解决问题的几种方法，可能还有很多其他方法。祝你好运

这里有一个网站，让人们可以看到你在做什么。谢谢你，Serlite！这解决了问题。很高兴我能帮上忙！哦，嗯……如果你认为我的答案是好的，你也可以投赞成票吗？（编辑）哎呀！我忘了你需要15个代表才能投票。别介意……是的，真的，否则我绝对会的！

div.promoItem {
    position: relative;
    display: inline-block;
    width: 29%;
    margin: 0 2% 20px 2%;
}