股利停留在父

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将调整该元素的顶端。

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

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