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