javascript - 文本绕行长大，高度属性向下增长

Question

所以根本的问题是，如果 block 的文本超过宽度变成两行， block 的额外高度将添加到顶部，但是当我在 CSS 中调整 block 的高度时，该高度会添加到底部。这是我面临的问题的屏幕截图:

因为右边板 block 的描述跨越了3行，所以div是向上增长的。我的想法是，如果我可以将 h5 的高度更改为文本跨越 3 行 (72px) 时的高度。如果我这样做，h5 会向下增长。

我将首先发布我的模板中的 html 和实时页面的 css。如果有帮助，我稍后会添加生成此网格的 js。抱歉有任何无关代码:)

提前致谢!

<a href='{{firstdibs}}' target='_blank'>
  <div class='storeItem'>
    <b class='sold {{sold}}'>SOLD</b>
    <img src='1stdibs/{{image}}.jpeg' />
    <div class='layer'>
      <div class='hide' id='itemDescription'>
        <h5>{{title}}</h5>
      </div>
    </div>
  </div>
</a>

div.storeItem {
    width: 28%;
    /* height: 200px; */
    /*box-shadow: 0 0 3px #000000;*/
    display: inline-block;
    margin: 20px 2.5% 20px 2.5%;

    box-shadow: 0px 0px 8px #aaaaaa;
}

div.storeItem:hover{

    box-shadow: 0px 0px 10px #444444;
    -webkit-animation: fadeIn .2s;
    -webkit-animation-fill-mode: forwards;
    animation: fadeIn .2s;
    animation-fill-mode: forwards;
}

div.storeItem img{
    max-width: 100%;
    padding: 10px;
    background-color: white;
}

.storeItem h5{
    font-family: MohaveTest;
    margin-bottom: 5px;
    width: 80%;
    font-weight: 200;
    /*font-style: italic;*/
    line-height: 120%;
    font-size: 20px;
    }

.storeItem p{
    font-family: Open Sans;
    font-weight: 300;
    font-size: 12px;
    width: 80%;
}

.hide{
    padding-bottom: 10px;
    padding-left: 10px;
    padding-top: 10px;
    color: rgba(161,91,73,1);
    width: 100%;
    }

Answer 1

<a>标签的默认 display状态是 inline .尝试使用 display: block在 <a> 上标记或包装成自定义 <div