幫助使用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;向下移動到產品編號的下方，而不管其高度如何，並且它已經位於圖像旁邊。