0

1 行に 3 つ表示することになっている 6 つのパーセンテージ幅のボックスのグループがあります。それらは左にフロートされ、すべて同じサイズですが、一見ランダムなブラウザー幅で、4 番目のアイテムがずっと右にフロートし、最後の 2 つのアイテムが 3 行目に押し下げられます。それぞれのマークアップは同じで、画像のサイズもすべて同じなので、何が原因なのかわかりません。ページはここにあります。ブラウザの幅を調整すると、私が言っていることがわかります。

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は親に追加してください<div>)

(編集) また、デザインがレスポンシブであることにも気付きました。そのため、小さい画面サイズ (要素が 1 行あたり 2 つ) の場合はwidth:46%、 about に変更する必要がありますwidth:45.5%。繰り返しますが、これは、上記の提案によって必要に応じて中央に配置できます。

繰り返しますが、これらは認識されている問題に対処できるいくつかの方法にすぎません。おそらく他にもたくさんの方法があります。幸運を！

于 2013-06-24T17:55:26.237 に答える