對角位置HTML元素

我是新來的Javascript &相對較新的HTML。我想知道什麼語言（純html或Javascript & html）我應該使用&算法的一些建議，以執行以下操作：對角位置HTML元素

將4個方塊放在背景上，但將它們對角放置。每個方塊都是一個鏈接，您可以點擊進入不同的頁面。 那麼，我將如何能夠像我的圖片對角地定位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>

來源

2011-02-28 Mack

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/

來源

2011-02-28 00:39:06 thirtydot

謝謝，這太棒了。有沒有辦法讓CSS的屏幕/瀏覽器尺寸，所以我可以使用這樣的表達式：left：expression（screen.width <= 1000？screen.width/4：true） – Mack

@Mack：不使用CSS（是與JS），但它會更好，如果我改變我的演示爲基於'％'的佈局，而不是如果你想補償不同大小的屏幕。 – thirtydot

@Mack：其實我不確定你想要什麼。你能解釋一下屏幕大小和頁面上應該改變的關係嗎？（框的大小，框的位置等） – thirtydot

您可以使用絕對定位用於此目的。

在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*/ 
}

來源

2011-02-28 00:36:32 Finbarr

對角位置HTML元素

回答

相關問題