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); 
    } 

前下方的CSS部分

Answer 1

更新谢谢

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

#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); 
 
}

<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>

Answer 2

@James请找到下面的代码。我希望你也期待着这一点。刚取代“display：inline-block;”与“浮动：左边;”并将锚定标记本身中的类“list-content”。

#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; 
 
    }

<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>

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; 
} 

{ 
 
    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; 
 
}

<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>