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 回答