Div卡在父母的底部

Question

我在下面的屏幕截图中有这样的情况：

我想将蓝色包围的div对齐到父div的顶部（用黑色包围），因为图像（用红色包围）是。我怎么能做到这一点？

我知道top -10px是一个选项（其中10被替换为确切的数字）但是我需要这个来处理各种屏幕尺寸，因此找不到解决该方法问题的确切值不是一种选择。

div的html如下：

<div class="product">
    <img class="productImg" src="http://placehold.it/300x240">
    <div class="productTxt">
        <h1>Title</h1>
        <h3>Price</h3>
        <p>Short Description Short Description Short Description Short Description Short Description Short Description Short Description Short Description Short Description </p>
    </div>
</div>

CSS：

.product {
    box-sizing: border-box;
    margin: 0px;
    padding: 10px;
    width: 100%;
    height: 330px;
    border: 5px solid black;
}

.productImg {
    width: 240px;
    height: 300px;
    display: inline-block;
    border: 3px solid red;
}

.productTxt {
    border: 3px solid blue;
    display: inline-block;
}

Answer 1

vertical-align: top会将该元素与顶部对齐。

＆＃13;

＆＃13;

.product {
  box-sizing: border-box;
  margin: 0px;
  padding: 10px;
  width: 100%;
  height: 330px;
  border: 5px solid black;
}

.productImg {
  width: 240px;
  height: 300px;
  display: inline-block;
  border: 3px solid red;
}

.productTxt {
  border: 3px solid blue;
  display: inline-block;
  vertical-align: top;
}

＆＃13;

<div class="product">
  <img class="productImg" src="http://placehold.it/300x240">
  <div class="productTxt">
    <h1>Title</h1>
    <h3>Price</h3>
    <p>Short Description Short Description Short Description Short Description Short Description Short Description Short Description Short Description Short Description </p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用flexbox。并按照这样对齐：

.product {
    box-sizing: border-box;
    margin: 0px;
    padding: 10px;
    width: 100%;
    height: 330px;
    border: 5px solid black;
    display:flex;
    align-items:flex-start;
}

这是一个小提琴：http://codepen.io/ruchiccio/pen/ZemOyV