讓DIV佔用的空間，其餘部分在Y軸上

我有一個看起來像這樣的產品模板： enter image description here 讓DIV佔用的空間，其餘部分在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％，但這沒有任何影響。

感謝

來源

2011-08-03 jmasterx

這裏是一個working example。

相關代碼：

#product { 
    ... 
    position:relative; 
} 

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

來源

2011-08-03 01:28:59

這是行不通的。 .productDesc沒有固定的高度。 – avetarman

呃...它的工作原理...你檢查我的例子嗎？ –

對不起。有用。在發佈我的解決方案之前，我嘗試了這種方法，但它不起作用。至少，我是這麼想的。 – avetarman

首先你需要設置float:left上的cont的ID股利。

您有該容器內的元素向左浮動，但該容器不是，因此其高度不會擴展到其內容。

然後您可以將productDesc div設置爲position:absolute和bottom:0px。

當然，這會混淆它對目前照片的相對定位，但是如果你想將它固定在父容器的底部，這是唯一的方法。然後，您可以設置right:100px或無論如何需要水平定位你想要的。

編輯：

這裏有一個工作示例：http://jsfiddle.net/citizenconn/hXSmK/

來源

2011-08-03 01:11:52

清除漂浮您.productDesc和.productPictures
使用顯示：inline-block的那些2個DIV。
並減少您的寬度.productDesc。說，使它350px

這將工作。

來源

2011-08-03 01:22:16 avetarman

讓DIV佔用的空間，其餘部分在Y軸上

回答

相關問題