文字包装长大，身高属性增长

Question

因此，根本问题在于，如果块的文本超出宽度并变为2行，则块的额外高度将添加到 top ，但是当我在CSS中调整块的高度时，该高度会添加到 bottom 。这是我面临的问题的截图：

因为右侧板的描述跨越3条线，所以div向上增长。我的想法是，当文本跨越3行（72px）时，如果我可以将 h5 的高度更改为它的高度。如果我这样做， 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