帮助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;向下移动到产品编号下方，无论其高度如何，它都已经在图像旁边。