Блог

Главная - Вопросы по программированию - Как можно уменьшить высоту фона, чтобы база моего изображения и нижняя граница были на одном уровне?

Как можно уменьшить высоту фона, чтобы база моего изображения и нижняя граница были на одном уровне?

#html #css

#HTML #css

Вопрос:

Я добавил изображение в 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>

Комментарии:

1. У вас возникли некоторые ошибки, попробуйте установить position: relative в div, а затем position: absolute в img.

Ответ №1:

Попробуйте использовать отрицательное верхнее поле на изображении вместо top :

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

Например: http://jsfiddle.net/ambiguous/k2Rq7/1 /

Установка top для относительно расположенного элемента не перемещает поле элемента, она просто регулирует, где элемент отображается относительно этого поля:

Для относительно расположенных блоков смещение выполняется относительно верхних краев самого блока (т. Е. блоку присваивается позиция в обычном потоке, затем смещается от этой позиции в соответствии с этими свойствами).

Таким образом, поле элемента занимает свое обычное пространство (в частности, высоту в вашем случае), а внешнее <div> не сжимается, чтобы соответствовать отображаемому положению изображения. Использование негатива margin-top фактически перемещает изображение, и это эффективно уменьшает его высоту и высоту содержимого <div> .