How is it possible to reduce the background height such that my image base and the bottom border are at same level?
I've added an image to a div and the height has been adjusted automatically.Then, I floated the image to the left and move the image to the top using relative positioning..However, the bg height remains the same. How can I decrease the height automatically?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
&开发者_StackOverflowlt;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>
Try using a negative top margin on the image instead of the top:
#bg img {
float: right;
margin-top: -50px;
}
For example: http://jsfiddle.net/ambiguous/k2Rq7/1/
Setting top on a relatively positioned element doesn't move the element's box, it just adjusts where the element is displayed with respect to that box:
For relatively positioned boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).
So the element's box takes up its usual space (specifically the height in your case) and the outer <div> doesn't shrink to match the image's displayed position. Using a negative margin-top actually moves the image and that effectively reduces its height and the height of the containing <div>.
加载中,请稍侯......
精彩评论