在1個主DIV的每邊放置一個DIV

北1，南1，西1，東1。

<div id="frame"> 
    <div id="north"></div> 
    <div id="east"></div> 
    <div id="map"></div> 
    <div id="south"></div> 
    <div id="west"></div> 
</div>

注意：幀以margin: auto;爲中心。 map的width和height可以改變。圍繞它的每個Div應該沒有問題。邊境。

看到這張照片：

 |-------| 
    | n | 
|----|-------|----| 
| w | map | e | 
|----|-------|----| 
    | s | 
    |-------|

我怎樣才能做到這一點最好的嗎？

編輯：

感謝迄今答案。我希望Navi Divs不是絕對定位的，但更像是「鏈接」到地圖Div。對不起，缺少信息。

我現在使用jQuery的mouseleave函數來確定離開地圖時鼠標移動的方向。所以這是完成的。

來源

2012-11-03 Patrick

北方，地圖和南方的寬度是否相互獨立？ – Stumbler

沒有地圖的寬度，南北都是一樣的。這些Div用於捕捉鼠標移動進行導航。 – Patrick

敲了一個jsfiddle在這裏：http://jsfiddle.net/seSfK/1/ – alimac83

解決了我的問題：我現在使用jQuery的mouseleave函數來確定離開地圖時鼠標移動的方向。所以這是完成的。

來源

2012-11-09 21:54:17 Patrick

我創建了一個小提琴here演示您的示例。它使用相對 - >絕對定位。它假設你知道元素的確切寬度/高度。

標記：

<div id="frame"> 
    <div id="north">north</div> 
    <div id="east">east</div> 
    <div id="map">map</div> 
    <div id="south">south</div> 
    <div id="west">west</div> 
</div>

CSS：

#frame {width: 450px; height: 450px; position: relative; margin: auto;} 

#frame div {position: absolute; width: 150px; height: 150px;} 

#map {top: 150px; left: 150px; background-color: orange;} 

#east {right: 0px; top: 150px; background-color: yellow;} 

#west {left: 0px; top: 150px; background-color: blue;} 

#north {left: 150px; top: 0; background-color: green;} 

#south {left: 150px; bottom: 0; background-color: gray;}

我使用了一些BG顏色，以便更清晰可見。

希望它有幫助。

來源

2012-11-03 23:00:41

在1個主DIV的每邊放置一個DIV

回答

相關問題