更新的问题链接-Page break at random places in browser print
我的要求是,我需要在该位置的“从顶部到底部的高度”的帮助下插入HTML元素。 我试图通过所附的图片传达确切的要求。 由于我的HTML页面的动态高度可能会因情况而异。
如何使用jQuery完成此操作?
答案 0 :(得分:1)
如果要将元素放置在特定位置,则将这些元素放置在标记中的位置无关紧要。可以使用CSS设置位置。例如,您可以使用:
.top {
position: absolute;
top: 100px;
}
.middle {
position: absolute;
top: 150px;
}
然后将这些类添加到您的div中。
或者,您可以使用百分比或视图高度(例如10vh)之类的自适应单位。
答案 1 :(得分:0)
看看这些功能
例如:
<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>
答案 2 :(得分:0)
尝试改用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%;
上面的示例指出:
链接到其他人CSS units