CSSレイアウトに関するヘルプ

Question

私は製品のテンプレートを作成しています。

基本的な考え方は、製品番号を完全に右に、画像を完全に左に、説明ボックスを製品番号の一番下にタッチして、写真の右端にタッチすることですその左。

番号と画像は正しい場所にあります。しかし、製品の説明は、私が意図するところではありません。ここで

はそれの写真です：

、ここではhtmlです：

<div id="product"> 
    <div class="productNumber">#425</div> 
    <div id="cont"> 
     <div class="productPictureA"> 
      <img src="images/mahogFront.png" alt="some_text"/> 
     </div> 
     <div class="productDesc">Product descriptionProduct 
       descriptionProduct descriptionProduct description 
     </div> 
    </div> 
</div> 

そして、これらはスタイルです：

#product { 
    background-color: #42533E; 
    width: 650px; 
} 
.productNumber { 
    padding: 4px; 
    font-size: 35px; 
    color: #FF0000; 
    float: right; 
} 

.productPictureA 
{ 
    float: left; 
    padding: 0px; 
    margin: 10px; 
} 
.productDesc{ 
    background-color: #00FFFF; 
    color: #FFFF00; 
    font-size: x-large; 
} 

まさに私が何をする必要がありますどのような前述の結果を達成するには？

おかげで私はあなたの質問を理解して何から

Answer 1

は、あなたがイメージ（.productPictureA）のための幅、およびあなたの説明（.productDesc）のための幅を設定する必要があり、かつ.productDesc左フロートでしょう。上からオフセットするには、margin-topを追加するだけです。

Answer 2

だから、would this fit your question？それはテキストの上にclear: right;を使用して、その高さにかかわらず製品番号の下に移動し、既に画像のすぐ隣に表示されます。