如何降低背景高度以使圖像底部和底部邊框處於同一水平？

我已經添加了一個圖像到一個div和高度自動調整。然後，我將圖像向左浮動，並使用相對定位將圖像移動到頂部..但是，bg高度保持不變。我怎樣才能自動降低高度？如何降低背景高度以使圖像底部和底部邊框處於同一水平？

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>CSS(4)</title> 
<style type="text/css"> 
#bg{width:1500px;background-color:#FCF;overflow:auto;} 

#bg img{float:right;position:relative;top:-50px;} 

</style> 
</head> 

<body> 

<div id="bg"> 
<img src="../../Desktop/produitsnonalimentaires/images/Produitsalimentaire.png" /> 
</div> 
</body> 
</html>

來源

2011-06-08 Vimal Basdeo

你有一些錯誤，嘗試設置位置：相對於div，然後位置：絕對img。 – baraboom 2011-06-08 18:08:22

嘗試使用圖片代替top上負上邊距：

#bg img { 
    float: right; 
    margin-top: -50px; 
}

例如：http://jsfiddle.net/ambiguous/k2Rq7/1/

設置top on a relatively positioned element不移動元素的盒子，它只是調節哪裏該元素相對於該框顯示：

對於相對定位的盒子，偏移是相對於盒子本身的頂部邊緣的（即，盒子在正常流動中被賦予一個位置，然後根據這些屬性從該位置偏移）。

因此，元素的框會佔用其通常的空間（特別是您的情況下的高度），而外部的<div>不縮小以匹配圖像的顯示位置。使用負面的margin-top實際上會移動圖像，並且有效地降低其高度和包含的高度<div>。

來源

2011-06-08 18:15:31

如何降低背景高度以使圖像底部和底部邊框處於同一水平？

回答

相關問題