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 引起的，它用于使包含预览图像和描述段落的所有框的高度相同，但如果是这种情况，那么开放空间也将是在两行之间重复。

任何指针都非常感谢！

4

6 回答 6

4

该元素的min-height内联样式为 184px。这显然会占用大量空间。

我相信它是由 equalHeights 插件添加的，你这样称呼它：

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

我认为这与您的 jQuery 插件有关，您的 H1 的最小高度设置为 148px，与您的视频预览 div 的高度相同。

改变这个

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

至

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

如果这不起作用，请将您的 H1 放在具有 videoGallery 类的 div 上方。

于 2013-07-09T12:12:19.677 回答
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>

您需要将最小高度更改为较小的值或将其全部删除并将其放入 css 中。

于 2013-07-09T12:15:31.123 回答
0

问题可能来自

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

您会看到它在元素上方和下方都有一个边距。当 h1 消失时，该边距可能会崩溃，但当它有一个要推开的元素时返回。

于 2014-04-15T03:23:12.313 回答
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 回答