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>
我正在尋找在頁面加載腳本末尾修改位置屬性爲'靜態'。它做了一些有趣的事情,其中最重要的是每個元素現在是塊級。 –
是的,將兩個滑塊修改爲靜態,並確保'float:left'在口號類塊中,似乎工作。謝謝! –
好,我可以把你放在正確的道路上。如果它有幫助,請務必接受答案。 –