Question

大家好我正在尝试使用百分比来定位一些元素，这些元素被定义为position:absolute，但由于百分比，位置在不同的屏幕上相互折叠。我应该通过使用百分比得到这个{{3我试图在加载文档时获取它

这里是我的示例代码

<div class="_onload">
    <span id="l-1">A</span>
    <span id="l-2">B</span>
</div>

样式表

._onload {
    background-color:#f00;
    display:none;
    overflow-x:hidden;
    overflow-y:hidden;
    position: relative;
    height: 100%;
}
#l-1 {
    position: absolute;
    top:-85%;
    right:15.818%;
}
#l-2 {
    position: absolute;
    left:84.856%;
    bottom:-13.386%;
}

我的js fot it

$(window).load(function () {
    $('._onload').css("visibility", "visible");
    $('._onload #l-1').css("top", "85%");
    $('._onload #l-2').css("left", "84.102%");
});

这是我的demo

Answer 1

我将这些字符放在一个单独的div中并定位为绝对的。然后我删除了人物的绝对定位。这是小提琴：http://jsfiddle.net/fred02138/7ZZgz/1/

HTML

<body>
  <div class="_onload">
    <div id="text">
        <span id="l-1">A</span>
        <span id="l-2">B</span>
        <span id="l-3">C</span>
        <span id="l-4">D</span>
        <span id="l-5">E</span>
    </div>
  </div>
</body>

Answer 2

您必须使用媒体查询，请查看：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 3

您应该使用媒体查询，而不是使用百分比，这是一个很好的练习题。

请参阅W3C建议here以及使用here的一些示例。

使用百分比定位元素

3 个答案: