时间戳

首页 > 解决方案 > 我想从网页底部每隔 980px 放置一个带有“height_mark”类的 div

javascript - 我想从网页底部每隔 980px 放置一个带有“height_mark”类的 div

问题描述

这是我所拥有的：

Javascript（在标头中有一个 jquery 库）：

    var prev_height=0;
    for (var i=0; i<=100; i++) {
        prev_height+=980;
        $("body").append("<div class='height_mark' style='bottom:"+prev_height+"px'>"+(i)+"</div>");
    }

CSS：

.height_mark {
  position: absolute;
  left:300px;
  height:20px;
  width:30px;
  background-color:black;
  color:white;
}

我想做的事：我想从网页底部每隔 980px 放置一个带有“height_mark”类的 div。

问题：由于某种原因，它不显示高度标记。

标签： javascriptjquerycss

解决方案

在 JS 中使用“margin-top”而不是“bottom”，并定义每个添加的 div 的边距量（也将其包装在一个函数中并确保调用该函数）：


let winHeight = 0;
let margin = 980;

function addDivs(){
    for (var i=0; i<=100; i++) {
        winHeight+=980;
        $("body").append("<div class='height_mark' style='margin-top:"+margin+"px'>"+(i)+"</div>");
    }
    }

addDivs()

并在 css 中使用 position:relative：

.height_mark {
  position: relative;
  left:300px;
  height:20px;
  width:30px;
  background-color:black;
  color:white;
}

代码笔：

https://codepen.io/pen/bGVNYmm

推荐阅读