0

レスポンシブな方法で機能するように、ランダムに生成された単語を含むページを作成しようとしています。

<head>
<style type='text/css'>

.box {
  height: auto;
  position: absolute;
  width: auto;
 }
</style>
<script type='text/javascript'>
function setDivPos() {
  for (i=1; i<=2; i++) {
     var x = Math.floor(Math.random()*1130);
     var y = Math.floor(Math.random()*722);
     document.getElementById('div'+i).style.left = x + 'px';
     document.getElementById('div'+i).style.top = y + 'px';
  }
</head>

<body onload='setDivPos();'>
<div id='div1' class='box'>ARCHIVE</div>
<div id='div2' class='box'>PERSPECTIVE</div>
</div>
</body>

ウェブサイト全体は、ほぼこのアルゴリズムに基づいています。これらのランダムに配置されたオブジェクトを 1130x722 の領域内に配置し、各ユーザーの画面サイズ内に配置するにはどうすればよいですか。(応答)

4

1 に答える 1

0

それで、あなたはすべて正しいと思います..相対divで他の2つのdivをラップするdivを作成するのを忘れたようです。ボタンでこのフィドルの例を確認してください

    <head>
    <style type='text/css'>

.box {
  height: auto;
  position: absolute;
  width: auto;
 }
</style>
<script type='text/javascript'>
function setDivPos() {
  for (i=1; i<=2; i++) {
     var x = Math.floor(Math.random()*1130);
     var y = Math.floor(Math.random()*722);
     document.getElementById('div'+i).style.left = x + 'px';
     document.getElementById('div'+i).style.top = y + 'px';
  }}
 //Add this script ending tag and your closing bracket on the function
</script>
</head>

<body onload='setDivPos();'>
<div id='div1' class='box'>ARCHIVE</div>
<div id='div2' class='box'>PERSPECTIVE</div>
<!-- This is commented out, but you should probably just delete the div -->
<!-- </div> -->
</body>
于 2014-05-12T21:59:41.870 に答える