事業部は、私は下のスクリーンショットの状況を持っている親

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

使用フレキシボックス。そして、このようにそれを揃える：ここ

.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