使用 jquery 根据 div 的高度修复子元素位置答案

【问题标题】：Fix a child element position based on height of a div using jquery使用 jquery 根据 div 的高度修复子元素位置
【发布时间】：2022-12-08 03:02:59
【问题描述】：

enter image description here。请检查图像，日期实际上在视频播放器之外我使用 jquery 获取视频播放器的高度，并使用它的 90% 到日期的最高值（位置 abolsute）。但是我的解决方案并不是那么完美，即使视频播放器的高度在视口上发生了变化，我如何才能始终将日期对齐到相同的位置。这是我的代码

jQuery(document).ready(function( $ ){
    // Your code in here
    let dateTop = function(){
            let videoPlayerheight = jQuery('.flowplayer').height()/100*80;
            jQuery('.entry-date').css('top',(videoPlayerheight));
           
                                     
    }; 
    dateTop();
    
    jQuery(window).resize(function(){
        dateTop();
    });
    
    
    
    
});

我想根据视频播放器的高度（它不在同一个 div 中）始终处于相同位置的日期

jQuery(document).ready(function( $ ){
    // Your code in here
    let dateTop = function(){
            let videoPlayerheight = jQuery('.flowplayer').height()/100*80;
            jQuery('.entry-date').css('top',(videoPlayerheight));
           
                                     
    }; 
    dateTop();
    
    jQuery(window).resize(function(){
        dateTop();
    });
    
    
    
    
});

【问题讨论】：

标签： html jquery css

【解决方案1】：

你总是可以使用纯 CSS。

给视频的父类一个相对的位置。

然后日期绝对位置它并设置底部的 px 值。

.video1{
  height:200px;
  background:silver;
  position:relative;
}

.video2{
  height:300px;
  background:red;
  position:relative;
}

.date{
  position:absolute;
  bottom:20px;
  right:100px;
}

<div class="video1">
  <div class="date">5 days</div>
</div>

<div class="video2">
  <div class="date">5 days</div>
</div>

【讨论】：