Question

更新的问题链接-Page break at random places in browser print

我的要求是，我需要在该位置的“从顶部到底部的高度”的帮助下插入HTML元素。我试图通过所附的图片传达确切的要求。由于我的HTML页面的动态高度可能会因情况而异。

如何使用jQuery完成此操作？

Answer 1

如果要将元素放置在特定位置，则将这些元素放置在标记中的位置无关紧要。可以使用CSS设置位置。例如，您可以使用：

.top {
   position: absolute;
   top: 100px;
}

.middle {
   position: absolute;
   top: 150px;
}

然后将这些类添加到您的div中。

或者，您可以使用百分比或视图高度（例如10vh）之类的自适应单位。

Answer 2

看看这些功能

http://api.jquery.com/append/

http://api.jquery.com/html/

例如：

<body>

    <script>
         $( function() {
             $("body").append("<div style='margin-top: 100px;'>Some div here</div><div style='margin-top:150px;'>div here</div><div style='margin-top:250px;margin-bottom:50px;'>some div here</div>");
         });
    </script>
</body>

Answer 3

尝试改用CSS，这是一个工作代码：

<html>

<head>
  <style>
    html,
    body {
      text-align: center;
    }
    
    #div1 {
      margin: 100px 0px 0px 0px;
      background-color:lightblue;
    }
    
    #div2 {
      margin: 50px 0px 0px 0px;
      background-color:orange;
    }
    
    #div3 {
      margin: 100px 0px 50px 0px;
      background-color:red;
    }
  </style>
</head>

<body>
  <div id="div1">
    <p>Test Div1</p>
  </div>
  <div id="div2">
    <p>Test Div2</p>
  </div>
  <div id="div3">
    <p>Test Div3</p>
  </div>
</body>

</html>

如果您需要响应式设计

尝试使用自适应单元：

使用em是相对长度（相对长度单位指定相对于另一个length属性的长度。相对长度单位在不同的渲染媒体之间缩放更好。）

2em表示当前字体大小的2倍，因此他可以适应每个屏幕/浏览器等。

您还可以使用百分比单位，例如保证金：50％25％100％30％;

上面的示例指出：

顶部边距：50％右边距：25％底部边距：100％左边距：30％

这里是margin documentation.

的链接

链接到其他人CSS units

如何使用JS / jQuery在特定位置插入html元素

3 个答案:

如果您需要响应式设计

顶部边距：50％右边距：25％底部边距：100％左边距：30％