0

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

这是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;
}
4

1 回答 1

1

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

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

  1. 标准化您在这些情况下使用的资产的高度。由于那里没有很多图像，因此这应该不是一项非常冗长的任务 - 但如果它们发生变化，您必须记住正确的高度来制作新资产。或者，你可以...

  2. ...将您的 CSS 更改为更灵活一点。这些更改似乎对我有用：

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

    （可能偏离中心的 1-ish px 不应该引起注意，但如果它造成问题，请添加text-align: center到 parent <div>）

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

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

于 2013-06-24T17:55:26.237 回答