Div 卡在父级底部答案

【问题标题】：Div stuck at bottom of parentDiv 卡在父级底部
【发布时间】：2017-03-29 19:07:18
【问题描述】：

我有下面截图中的情况：

我希望用蓝色包围的 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;
}

【问题讨论】：

标签： html css position css-position

【解决方案1】：

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

.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;
}

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

【讨论】：

哦，我也只是在输入这个:( ...无论如何+1。

【解决方案2】：

使用弹性框。并像这样对齐它：

.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

【讨论】：