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;을 사용하면 높이에 관계없이 제품 번호 아래로 내려갈 수 있으며 이미 이미지 옆에 있습니다.