1

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

这是我的示例代码

<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 找到了它

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

这是我的小提琴

4

3 回答 3

0

我将字符放在一个单独的 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>
于 2013-08-23T13:02:26.627 回答
0

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

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

于 2013-08-23T13:06:14.500 回答
0

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

请参阅此处的 W3C 建议和此处的一些使用示例。

于 2013-08-23T13:12:35.927 回答