Question

我正在我网站的主页上工作，想要展示不同种类的方形模块。一切正常，直到我在模块上使用图像。每当我添加一个img时，父div将位置向下改变几个像素。

这是我的代码：

HTML：

<div class="module-box">
  <div class="module-dummy"></div>
  <div class="module-body">
    <a href="@post.linkToVideo">
      <div class="play-button-div">
        <img src=@Umbraco.Media(post.image).Url width="100%" height="100%" />
        <span class="play-button-icon"><i class="fa fa-play" aria-hidden="true"></i></span>
      </div>
    </a>
  </div>
</div>

CSS：

.module-box {
    display: inline-block;
    position: relative;
    width: 100%;
}

.module-dummy {
    margin-top: 100%;
}

.module-body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.play-button-div {
    margin: 0 auto;
    display:table;
    position:relative;
}

.play-button-div img {
    display:block;
    margin: 0;
    padding: 0;
    position:relative;
}

.play-button-div i{
    width: 100px;
    height: 100px;
    color: #0080ff;
    background-color: #fff;
    border-radius: 50px;
      border: 3px solid #0080ff;
    font-size: 70px;
   text-align: center;
    line-height:100px;
    text-indent:15px;
    opacity: .8;

}
.play-button-icon {

    width: 100px;
    height: 100px;
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:auto;
}

.play-button-div:hover img {
  opacity: .6;
}

.play-button-div:hover i {
    background-color: #0080ff;
    color: #fff;
    border: 3px solid #FFF;
}

Answer 1

我想你的意思是父DIV变得更高/通过在图像下面添加一点空间来推动后续元素？在这种情况下，您可以将line-height: 0添加到图像容器中（但仅当其中包含 no 文本时）。

另一方面，如果这是您的容器和图像的CSS：

.play-button-div {
    margin: 0 auto;
    display:table;
    position:relative;
}
.play-button-div img {
    display:block;
    margin: 0;
    padding: 0;
    position:relative;
}

，然后您应该将display:block;更改为display:table-cell;中的.play-button-div img，并将vertical-align: top;添加到其中。

Img改变父div的位置

1 个答案: