[英]Make div take up remainder of space on the Y axis
我有一個看起來像這樣的產品模板:
它的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>
<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%,但這沒有任何效果。
謝謝
這是一個可行的例子 。
相關代碼:
#product {
...
position:relative;
}
.productDesc{
...
position:absolute;
bottom:0px;
right:0px;
}
首先,您需要在div上設置id為cont
float:left
。
您在該容器內有一些元素向左浮動,但該容器沒有,因此其高度不會擴展到其內容。
然后,您可以將productDesc
div設置為position:absolute
和bottom:0px
。
當然,這會使其相對於當前照片的相對位置混亂,但是,如果要將其固定在父容器的底部,那是唯一的方法。 然后,您可以設置right:100px
或需要水平放置的任意right:100px
。
編輯:
這是一個工作示例: http : //jsfiddle.net/citizenconn/hXSmK/
這將起作用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.