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 for it

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

ここに私のフィドル

4

3 に答える 3

0

パーセンテージを使用する代わりに、メディア クエリを使用する必要があります。これは良い練習問題です。

W3C の推奨事項はこちら、使用例はこちらを参照してください。

于 2013-08-23T13:12:35.927 に答える
0

メディア クエリを使用する必要があります。これを確認してください。

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

于 2013-08-23T13:06:14.500 に答える
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 に答える