Положение div в зависимости от высоты другого div

Question

У меня есть <div> (назовем его «изображение»), который содержит несколько изображений <img><img><img> и так далее. Ширина этого div устанавливается на 100% экрана, а изображения внутри изменяются в зависимости от ширины. Так что, в зависимости от ширины браузера, высота моего div меняется.

Теперь я хотел бы создать еще один div (назовем его «after_image»), который начинается после этого изображения, не используя «родственник», а получая высоту <div id="image"> и используя его как «top: px» атрибут.

Является ли это возможным? Может быть <script>? (Я использую PHP)

javascript html css

0

Luca Danieli 30 Май 2019 в 00:41

Answer 1

Попробуй это :


<div id='image'>
  <img src='' />
  <img src='' />
  <img src='' />
</div>
<div id='after_image'></div>

<script>
  var h = document.getElementById('image').clientHeight // returns height as number
  document.getElementById('after_image').style.top = h + 'px'
</script>

0

oldboy 30 Май 2019 в 00:09

Answer 2

Вот как вы можете добиться того, чего хотите, хотя, на мой взгляд, это неправильный подход.

const
  image = document.querySelector('#image'),
  after = document.querySelector('#after_image')
  
after.style.top = image.getBoundingClientRect().bottom + 'px'

#image {
  width: 200px;
  height: 2750px;
  box-sizing: border-box;
  border: solid blue 3px;
  background: skyblue;
}

#after_image {
  width: 200px;
  height: 500px;
  position: absolute;
  box-sizing: border-box;
  border: solid orangered 3px;
  background: pink;
}

<div id='image'>
  <img src='' />
</div>
<div id='after_image'></div>

Если вы действительно хотите сделать это таким образом, лучше связать свой оператор JS с событием resize.

window.addEventListener('resize', function(){
  after.style.top = image.getBoundingClientRect().bottom + 'px'
}

0

oldboy 29 Май 2019 в 21:59

Положение div в зависимости от высоты другого div

2 ответа

Похожие вопросы

Новые вопросы

javascript