Question

我有一个<div>（我们称之为“图像”），其中包含一些图像<img><img><img>，依此类推。该div的宽度设置为屏幕的100％，内部的图像根据宽度重新缩放。因此，根据浏览器的宽度，我的div的高度会发生变化。

现在，我想创建另一个在该图像之后开始的div（我们称其为“ after_image”），而无需使用“相对”，而是通过获取<div id="image">的高度并将其用作“ top” ：px“属性。

有可能吗？也许是<script>？（我正在使用PHP）

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>

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

div的位置取决于另一个div的高度

2 个答案: