0

何らかの理由で、このページの H1 タグの下に大量のスペースがあります。H1 が削除されると、余分なスペースが削除されますが、これを引き起こしているコードを特定できませんでした。!important で 0 のマージンを適用しましたが、これは効果がありませんでした。

<div class="videoGallery large-12 columns">

    <h1>Fitness Videos</h1>

    <div class="videoPreviewBox">
        <a class="video1" href="#">
            <div class="videoPreview">
                <img class="videoPreviewImg" src="img/promo/groupFitness.jpg">
                <img class="playButtonHover" src="../img/playButtonHover.png">
                <img class="playButton" src="../img/playButton.png">
            </div>
        </a>
    </div>

CSS は次のとおりです。

.videoGallery h1 {
  color: white;
  font-size: 24px;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 24px;
}

div.videoPreviewBox {
  float: left;
  display: inline-block;
  width: 21%;
  margin: 0% 2%;
}

@media only screen and (max-width: 594px) {
  div.videoPreviewBox {
    width: 46%;
  }
}
@media only screen and (max-width: 300px) {
  div.videoPreviewBox {
    width: 96%;
  }
}

div.videoPreview { 
  position: relative;
}

img.videoPreviewImg {
  width: 100%;
  z-index: 1;
}

img.playButtonHover, img.playButton {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  margin-top: -24px;
  margin-left: -24px;
  -webkit-transition: opacity .7s ease-in-out;
  -moz-transition: opacity .7s ease-in-out;
  -o-transition: opacity .7s ease-in-out;
  transition: opacity .7s ease-in-out;
}

div.videoPreview:hover img.playButton {
  opacity: 0;
}

div.videoPreviewBox p {
  margin: 2% 0% 4% 0%;
  color: white;
  line-height: 18px;
}

最初は、プレビュー画像と説明段落を含むすべてのボックスを同じ高さにするために使用される jQuery プラグイン equalHeights が問題の原因であると考えていましたが、その場合、空きスペースも2 つの行の間で複製されます。

どんなポインタでも大歓迎です！

4

6 に答える 6

4

この要素のmin-heightインライン スタイルは 184px です。それは明らかに多くのスペースを占有することになります。

次のように呼び出している equalHeights プラグインによって追加されたと思います。

$(function(){ $('.videoGallery').equalHeights(); });
于 2013-07-09T12:09:49.867 に答える
1

jQueryプラグインに関係していると思います。H1の最小高さは、ビデオプレビューdivと同じ高さの148pxに設定されています。

これを変える

$(function(){ $('.videoGallery').equalHeights(); });

に

$(function(){ $('.videoGallery div').equalHeights(); });

これがうまくいかない場合は、クラス videoGallery で div の上に H1 を配置します。

于 2013-07-09T12:12:19.677 に答える
0

このコードを試してください：

.videoGallery h1 {
color: white;
font-size: 24px;
margin: 0;
padding: 0 !important;
line-height: 50px;
clear: both;
display: inline;
}

line-heightとdisplayプロパティに注意してください

于 2013-07-09T12:10:18.317 に答える
0

でインラインをmin-height: 184px宣言しました<h1/>。インライン スタイルを削除するか、.videoGallery h1 { min-height: 0 !important; }

于 2013-07-09T12:12:38.867 に答える
0

FireBug でページを調べると、次のようになっていることがわかります。

<h1 **style="min-height: 184px;"**>Fitness Videos</h1>

min-height を小さい値に変更するか、まとめて削除して css に入れる必要があります。

于 2013-07-09T12:15:31.123 に答える