대각선으로 HTML 요소 배치

Question

JavaScript에 익숙하지 않은 나는 비교적 새로운 HTML로 &이다.

놓습니다 배경에 4 개 사각형하지만 대각선을 위치 : 나는 다음을 수행하기 위해 알고리즘의 & 몇 가지 제안을 사용해야 어떤 언어 (순수 HTML이나 자바 스크립트 & HTML) 알고 싶습니다. 각 사각형은 클릭하여 다른 페이지로 이동할 수있는 링크입니다. 그래서 아래 그림과 같이 html 요소를 대각선으로 배치 할 수 있습니까?

http://i54.tinypic.com/2v7uw5u.png

나는 내 코드는 다음과 같을 것이다 믿습니다

<script> 
    function positionIt() 
    { 
     var screenW = // javascript function to get screen width??; 
     var screenH = // javascript function to get screen height??; 

     var sq1 = document.getElementById("square1"); 
     var sq2 = document.getElementById("square2"); 
     var sq3 = document.getElementById("square3"); 
     var sq4 = document.getElementById("square4"); 

     // What javascript functions set a elements x,y positions? 
     // Should I use another way of positioning the square (not by absolute terms) 
     sq1.setXPos(screenW/4); 
     sq1.setYPos(screenH/4); 

     sq2.setXPos(screenW/3); 
     sq2.setYPos(screenH/3); 
    } 
</script> 

// OR if I use css 
.menu { background-color: blue; } 
/* Position the square in absolute terms diagonally */ 
#square1 { x=200; y=200; } 
#square2 { x=300; y=300; } 
#square3 { x=400; y=400; } 
#square4 { x=500; y=500; } 

<div class="menu" onload="positionIt()"> 
    <a id="square1" href="home.html"><img src="square.jpg" /></a> 
    <a id="square2" href="home.html"><img src="square.jpg" /></a> 
    <a id="square3" href="home.html"><img src="square.jpg" /></a> 
    <a id="square4" href="home.html"><img src="square.jpg" /></a> 
</div> 

Answer 1

Live Demo
Live Demo

난 당신이 요청한 번호를 유지하기 위해 노력했다 (left 특성은 모형을 일치하도록 변경 순서).

HTML :

<div class="menu"> 
    <a id="square1" href="home.html"><img src="http://dummyimage.com/100/f90/fff" /></a> 
    <a id="square2" href="home.html"><img src="http://dummyimage.com/100/f90/fff" /></a> 
    <a id="square3" href="home.html"><img src="http://dummyimage.com/100/f90/fff" /></a> 
    <a id="square4" href="home.html"><img src="http://dummyimage.com/100/f90/fff" /></a> 
</div> 

CSS :이 작업을 수행하는 방법

.menu { 
    background: blue; 
    width: 800px; 
    height: 800px; 
    position: relative 
} 
/* Position the square in absolute terms diagonally */ 
#square1 { position:absolute; left:200px; top:200px; } 
#square2 { position:absolute; left:300px; top:300px; } 
#square3 { position:absolute; left:400px; top:400px; } 
#square4 { position:absolute; left:500px; top:500px; } 

? 참조 : http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 2

당신은이 목적을 위해 절대 위치를 사용할 수 있습니다. CSS에서

:

#menu { 
    position: relative; 
    width: /*enough width for all of the positioned elements*/ 
    height: /*enough height for all of the position elements*/ 
} 
#squareN { 
    top: /*how far from top of #menu*/ 
    left: /*how far from left of #menu*/ 
    position: absolute; 
    width: /*as required*/ 
    height: /*as required*/ 
}