0

私のアニメーション スクリプトは、div テキスト要素の絶対位置を変更します。ウィンドウやテキストのサイズ変更で要素が重ならないようにする最善の方法を見つけようとしています。理想的には、液体のレイアウトになります。

与えることができるどんな助けでも大歓迎です！これが私のコードです：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
    .slogan
    {
        font-weight: bold;
        font-size: 1.5em;
        width: 12em;
        margin: 0.5em;
        cursor: pointer;
    }
    #slogan1
    {
         position: absolute;
         left: -250px;     
         margin-right: 1em;                    
    }
    #slogan2
    {
         position: absolute;
         left: -250px; 
    }
</style>
<script type="text/javascript">

    window.onload = slideRight;

    function slideRight() {                  
        //code that slides slogan1 and slogan2 into place on page load   
        //by assigning to divElement.style.left recursively
        slider = document.getElementById('slogan1');
        slider.style.left = '5%';
        slider = document.getElementById('slogan2');
        slider.style.left = '50%';
    }               
</script>
</head>
<body>
<div class="slogan" id="slogan1">Some
    <div id="rep1">
        <p>Some copy that represents parent slogan ipso lorum 1234567890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890</p>
        <p>More copy that represents parent slogan ipso lorum 1234567890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890?</p>
        <p>More copy that represents parent slogan ipso lorum 1234567890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890!</p>
    </div>
</div>          
<div class="slogan" id="slogan2">Slogan
    <div id="rep2">
        <p>Some copy that represents parent slogan ipso lorum 1234567890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890</p>
        <p>More copy that represents parent slogan ipso lorum 1234567890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890?</p>
        <p>More copy that represents parent slogan ipso lorum 1234567890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890!</p>
    </div>
</div>
</body>
</html>
4

1 に答える 1

0

あなたはそうではありません..可能な限り絶対位置を避けるべき正確な理由です。

絶対位置とは、特定の位置に固定されたピクセルを意味します。ウィンドウのサイズを変更すると、要素は指定した位置を保持します。それがオーバーラップすることを意味する場合、それが機能します。

コンテンツを画面サイズに合わせて調整する場合は、絶対配置要素の代わりにフローティング要素を使用してください。

于 2012-11-30T19:25:32.123 に答える