Question

我有一组六个百分比宽度的框，应该每行显示三个。它们向左浮动并且所有都是相同的大小，但是看似随机的浏览器宽度，第四个项目一直向右浮动，最后两个项目被向下推到第三行。每个的标记是相同的，并且图像的大小都相同，所以我不确定是什么原因引起的。该页面存在here。当您调整浏览器宽度时，您将看到我的意思。

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

CSS：

div.promoItem { 
  position: relative;
  float: left;
  width: 29.333333%;
  margin: 0 2% 20px 2%;
}

div.promoItem img { 
  z-index: 1; 
  max-width: 100%;
}
div.promoItem div {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4px;
  height: 35px;
  line-height: 26px;
  text-align: center;
  overflow: hidden;

}
div.promoItem div.colorBG {
  z-index: 2;
  background-color: #FFD700;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
  filter: alpha(opacity=75);
  opacity: 0.75;
}

div.promoItem:hover div.promoLabel {
  background-color: #FFD700;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
} 

div.promoItem div.promoLabel {
  z-index: 3;
  color: #0D42C0;
}

Answer 1

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

查看该网站，我认为问题在于用于<div class="promoItem">元素的图像的尺寸。您的资产高度之间的差异（264px-265px）似乎导致换行。您可以通过以下几种方式解决此问题：

标准化您在这些实例中使用的资产的高度。由于你没有很多图像，这不应该是一个非常漫长的任务 - 但如果它们发生变化，你必须记住正确的高度来制作新的资产。或者，你可以......
...将您的CSS更灵活一点。这些变化似乎对我有用：
```
div.promoItem {
    position: relative;
    display: inline-block;
    width: 29%;
    margin: 0 2% 20px 2%;
}
```
（1-ish px可能偏离中心应该不明显，但如果出现问题，请将text-align: center添加到父<div>）

（编辑）我也注意到设计是响应式的。因此，对于较小的屏幕尺寸（每行元素为2），您需要将width:46%更改为约width:45.5%。同样，如果上述建议需要，这可以集中在一起。

同样，这些只是可以解决感知问题的几种方式，可能还有很多其他方法。祝你好运！

“gallery”布局中的浮动项目以随机浏览器宽度突破到下一行

1 个答案: