gpt4 book ai didi

html - 如何降低背景高度,使我的图像底部和底部边框处于同一水平?

转载 作者:太空宇宙 更新时间:2023-11-04 16:22:39 25 4
gpt4 key购买 nike

我在div中添加了一张图片,高度已经自动调整。然后,我将图片向左浮动,并使用相对定位将图片移动到顶部。但是,背景高度保持不变。如何自动降低高度?

<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>

最佳答案

尝试在图像上使用负上边距而不是 top :

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

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

设置 top on a relatively positioned element不会移动元素的框,它只是调整元素相对于该框的显示位置:

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).

所以元素的盒子占据了它通常的空间(特别是你的高度)和外部 <div>不会缩小以匹配图像的显示位置。使用负数 margin-top实际上移动了图像并有效地降低了它的高度和包含 <div> 的高度.

关于html - 如何降低背景高度,使我的图像底部和底部边框处于同一水平?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6283144/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com