Используйте положение в CSS и рассчитайте высоту - PullRequest
Новая
       30

Используйте положение в CSS и рассчитайте высоту

1 голос
/ 12 апреля 2020

Я установил ширину img 100%, поэтому я не знаю высоту img. Я пытаюсь установить div в конце img, используя позиции absolute и top. Можем ли мы использовать cal c () ? Или другой метод.

Примечание: я установил фиксированное положение img. 

<div class="container">
<img class="image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
</div>

<div class="to-image-bottom">I'm div at the bottom of image</div>

1 Ответ

1 голос
/ 12 апреля 2020

Вы можете использовать bottom вместо top для позиционирования элементов. Также используйте обертку для нижнего div для отображения его вне изображения. Например: 

/* Container for image and bottom div */
.container{
  position: relative;
  /* For display content outside of image */
  overflow: visible;
}

/* Image Styles */
.container .image{
  width: 100%;
}

/* Wrapper for bottom div for align to bottom */
.container .to-image-bottom-wrapper{
  position: absolute;
  width: 100%;
  bottom: 0;
}

/* Bottom Div */
.container .to-image-bottom-wrapper .to-image-bottom{
  position: absolute;
  top: 0; /* position relative to wrapper */
  width: 100%;
  background: red;
  color: white;
  text-align: center;
}
<div class="container">
    <img class="image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
    <div class="to-image-bottom-wrapper">
      <div class="to-image-bottom">I'm div at the bottom of image</div>
    </div>
</div>

Отредактировано для отображения div вне изображения

...