更改div的高度，当它悬停在底部

Question

我试图让我的div，在悬停留在他们当前的位置，但在底部，你徘徊的一个需要获得一个数额高度，我怎样才能实现这一点，而不使用flexbox？
目前这情况发生：https://i.gyazo.com/746b8f3eb1ade6d870439ad4826adf9e.mp4

.p-block { 
width: 100%; 
margin-left: 10%; 
margin-right: 10%; 
} 

.project-block { 
margin-left: 20px; 
display: inline-block; 
width: 20%; 
background-color: #000; 
height: 300px; 
} 

.project-block:hover { 
height: 380px; 
} 

和HTML是如下

  <div class="p-block"> 
       <div class="project-block"> 
       </div> 
       <div class="project-block"> 
       </div> 
       <div class="project-block"> 
       </div> 
       <div class="project-block"> 
       </div> 
      </div> 

Answer 1

看看帮助：

.p-block { 
 
    width: 100%; 
 
    margin-left: 10%; 
 
    margin-right: 10%; 
 
} 
 

 
.project-block { 
 
    margin-left: 20px; 
 
    display: inline-block; 
 
    margin-top: 80px; 
 
    width: 20%; 
 
    background-color: #000; 
 
    height: 300px; 
 
} 
 

 
.project-block:hover { 
 
    height: 380px; 
 
    margin-top: 0; 
 
}

<div class="p-block"> 
 
    <div class="project-block"> 
 
    </div> 
 
    <div class="project-block"> 
 
    </div> 
 
    <div class="project-block"> 
 
    </div> 
 
    <div class="project-block"> 
 
    </div> 
 
</div>

Answer 2

试试这个：

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    box-sizing: border-box; 
 
} 
 

 
body, 
 
html { 
 
    width: 100%; 
 
    height: 100$; 
 
} 
 

 
.p-block { 
 
    width: 100%; 
 
    margin-left: 10%; 
 
    margin-right: 10%; 
 
    margin-top: 40px; 
 
} 
 

 
.project-block { 
 
    margin-left: 20px; 
 
    display: inline-block; 
 
    width: 20%; 
 
    background-color: #000; 
 
    height: 300px; 
 
} 
 

 
.project-block:hover { 
 
    margin-top: -40px; 
 
    padding-top: 40px; 
 
    background: black; 
 
    height: 340px; 
 
}

<div class="p-block"> 
 
    <div class="project-block"> 
 
    </div> 
 
    <div class="project-block"> 
 
    </div> 
 
    <div class="project-block"> 
 
    </div> 
 
    <div class="project-block"> 
 
    </div> 
 
</div>