는 DIV 확인 나는이처럼 보이는 제품 템플릿을

Question

Y 축 공간의 나머지 부분을 차지 :

그것의 HTML은 다음과 같습니다

   <div id="product"> 

      <div id="cont"> 
      <div class="productPictures"> 
          <a 
       href="images/spalt_images/body_images/525a.JPG" 
       target="_blank" 
       > 
       <img src="images/spalt_images/body_images/525a.JPG" 
       width="180" 
       height="139.52153110048" 
       alt="front image" class="productImage"/> 
       </a> 
          <a 
       href="images/spalt_images/body_images/525a.JPG" 
       target="_blank" 
       > 
       <img src="images/spalt_images/body_images/525a.JPG" 
       width="180" 
       height="139.52153110048" 
       alt="front image" class="productImage"/> 
       </a> 

         </div> 
      <div class="productNumber"> #123   </div> 
      <div class="productDesc"> 
      <table> 
    <col id="col1" /> 
    <col id="col2" /> 
    <tbody> 
      <tr> 

      <td> Body Type: </td> 
      <td> Stratocaster   </td> 
     </tr> 
       <tr> 
      <td> Body Wood Type: </td> 
      <td> Walnut   </td> 

     </tr> 
       <tr> 
      <td> Weight: </td> 
      <td> 12.7 lbs   </td> 
     </tr> 
       <tr> 
      <td> Thickness: </td> 

      <td> 1 inch   </td> 
     </tr> 
       <tr> 
      <td> Routing: </td> 
      <td> Standard   </td> 
     </tr> 


    </tbody> 
</table> 
       &nbsp;<div class="productPrice"> 
       $456.00 
       </div> 
</div> 
      </div> 
</div> 

     </div> 
     </div> 

와 CSS :

#product { 
    background-position: left top; 
    border: 2px solid #2D0000; 
    background-color: #42533E; 
    width: 650px; 
    overflow: hidden; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px 4px 4px 4px 

} 
.productNumber { 
    padding: 4px; 
    font-size: 35px; 
    color: #C9E0D0; 
    float: right; 
    text-shadow: 2px 2px 3px #252525; 
} 
.productPictures 
{ 
    float: left; 
    padding: 0px; 
    margin: 5px 0px 10px 0px; 
    width: 200px; 
} 
.productDesc{ 
    padding: 5px 10px 5px 5px; 
    color: #FFFFFF; 
    font-size: large; 
    float: left; 
    width: 400px; 
    height: 100%; 
} 
.productPrice { 
    font-size: 25px; 
    color: #F4D582; 
    text-align: right; 
    font-weight: bold; 
    text-shadow: 2px 2px 3px #252525; 
} 
.productImage { 
    border: 2px solid #20281E; 
    margin-top: 10px; 
    margin-right: 10px; 
    margin-left: 10px; 
} 

#col1{ 
    width: 40%; 
} 
#col2{ 
    width: 60%; 
} 
table{ 
    width: 100%; 
} 

그래서 내가 원하는 것은 제품 설명 div가 하단에서 끝나기 때문에 가격도 바닥에 오를 수 있기 때문입니다. 높이를 100 %로 설정하려고 시도했지만 효과가 없습니다.

감사

모든

Answer 1

여기는 working example입니다.

관련 코드 :

#product { 
    ... 
    position:relative; 
} 

.productDesc{ 
    ... 
    position:absolute; 
    bottom:0px; 
    right:0px; 
} 

Answer 2

먼저 당신은 cont의 ID와 DIV에 float:left를 설정해야합니다.

해당 컨테이너 안의 요소가 왼쪽으로 떠 있지만 해당 컨테이너가 없으므로 높이가 내용으로 확장되지 않습니다.

그러면 position:absolute 및 bottom:0px이되도록 productDesc div를 설정할 수 있습니다.

물론 이것은 현재 가지고있는 사진에 대한 상대적인 위치 지정이 엉망입니다. 그러나 부모 컨테이너의 맨 아래에 고정시키고 싶다면 그 방법 밖에 없습니다. 그런 다음 right:100px을 설정하거나 원하는대로 수평으로 배치해야합니다.

편집 : 사람들을위한 인라인 블록 : http://jsfiddle.net/citizenconn/hXSmK/

Answer 3

• 지우기이 .productDesc 및 .productPictures
• 사용 표시 수레 : 여기

  가 작동 예제 2 명의 DIV.

• .productDesc의 너비를 줄이십시오. 말해봐, 만들어라 350px

이것은 작동 할 것이다.