Div标签在悬停时会下降

Question

当我悬停Div标记时，另一个Div标记将出现在prev div前面。当我没有说任何话时，它就有效。但是当我把h3标签放入时，div会下降。

这是HTML

<div id="content">
    <h1 class="head-content">Biscuits</h1>
    <div class="line"></div>
    <a href="#">
        <div class="list-content">
            <div class="detail-content">
                <h3>Biscuits 1</h3>
                <p>Price: IDR 12000</p>
            </div>
        </div>
    </a>
    <a href="#">
        <div class="list-content">
            <div class="detail-content">

            </div>
        </div>
    </a>
    <a href="#">
        <div class="list-content">
            <div class="detail-content">

            </div>
        </div>
    </a>
</div>

这是CSS

#content{
        width:50%;
    }
    .line{
        border-top: 5px solid black;
    }
    .list-content{
        display:inline-block;
        width:25%;
        height:200px;
        background-color: black;
        margin-top: 10px;
    }
    .detail-content{
        display: none;
    }
    .list-content:hover .detail-content{
        display: block;
        width:100%;
        height:75%;
        background-color: rgba(255,255,255,0.6);
    }

之前谢谢你

Answer 1

更新下面的css部分

.list-content:hover .detail-content {
  display: table;
  width: 100%;
  height: 75%;
  background-color: rgba(255, 255, 255, 0.6);
}

＆＃13;

＆＃13;

#content {
  width: 50%;
}

.line {
  border-top: 5px solid black;
}

.list-content {
  display: inline-block;
  width: 25%;
  height: 200px;
  background-color: black;
  margin-top: 10px;
}

.detail-content {
  display: none;
}

.list-content:hover .detail-content {
  display: table;
  width: 100%;
  height: 75%;
  background-color: rgba(255, 255, 255, 0.6);
}

＆＃13;

<div id="content">
  <h1 class="head-content">Biscuits</h1>
  <div class="line"></div>
  <a href="#">
    <div class="list-content">
      <div class="detail-content">
        <h3>Biscuits 1</h3>
        <p>Price: IDR 12000</p>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="list-content">
      <div class="detail-content">

      </div>
    </div>
  </a>
  <a href="#">
    <div class="list-content">
      <div class="detail-content">

      </div>
    </div>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

@James请找到以下代码。我希望你期待同样的事情。刚刚更换了＆＃34;显示：inline-block;＆＃34;用＆＃34; float：left;＆＃34;并参加了课程＆＃34; list-content＆＃34;在锚标签本身。

＆＃13;

＆＃13;

#content{
        width:50%;
    }
    .line{
        border-top: 5px solid black;
    }
    .list-content{
        float:left;
        width:25%;
        height:200px;
        background-color: black;
        margin-top: 10px;
        margin-right:10px;
    }
    .detail-content{
        display: none;
    }
    .list-content:hover .detail-content{
        display: block;
        width:100%;
        height:75%;
        background-color: rgba(255,255,255,0.6);
    }
   .clearfix{
   clear:both;
   }

＆＃13;

<div id="content">
    <h1 class="head-content">Biscuits</h1>
    <div class="line"></div>
  <div class="clearfix">  
    <a href="#" class="list-content">
        <div class="detail-content">
                <h3>Biscuits 1</h3>
                <p>Price: IDR 12000</p>
            </div>
    </a>
    <a href="#" class="list-content">
        <div class="detail-content">

            </div>
    </a>
    <a href="#" class="list-content">
        
            <div class="detail-content">

            </div>
        
    </a>
   </div> 
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

由于.list-content项是内联块，因此当您添加文本内容时，必须垂直对齐它们。将vertical-align: top添加到.list-content：

.list-content {
  display: inline-block;
  width: 25%;
  height: 200px;
  background-color: black;
  margin-top: 10px;
  vertical-align: top;
}

并删除上边距：

h3 {
  margin-top: 0;
}

＆＃13;

＆＃13;

{
  width: 50%;
}

.line {
  border-top: 5px solid black;
}

.list-content {
  display: inline-block;
  width: 25%;
  height: 200px;
  background-color: black;
  margin-top: 10px;
  vertical-align: top;
}


.detail-content {
  display: none;
  width: 100%;
  height: 75%;
  background-color: rgba(255, 255, 255, 0.6);
}

.list-content:hover .detail-content {
  display: block;
}

h3 {
  margin-top: 0;
}

＆＃13;

<div id="content">
  <h1 class="head-content">Biscuits</h1>
  <div class="line"></div>
  <a href="#">
    <div class="list-content">
      <div class="detail-content">
        <h3>Biscuits 1</h3>
        <p>Price: IDR 12000</p>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="list-content">
      <div class="detail-content">

      </div>
    </div>
  </a>
  <a href="#">
    <div class="list-content">
      <div class="detail-content">

      </div>
    </div>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;