獲取容器中的空白區域

Question

如何在使用Javascript的容器中獲得空白區域（例如白色區域）？ 有沒有準備好的jQuery函數或其他相同的東西？

我需要的寬度，高度，左和「空」中的白色區域的Javascript的頂部位置。

http://jsfiddle.net/P4QHj/

HTML

<div id="container"> 
    <div class="box-item a">A</div> 
    <div class="box-item d">D</div> 
    <div class="box-item e">E</div> 
    <div class="box-item f">F</div> 
</div>​ 

CSS

.box-item { 
width: 100px; 
height: 100px; 
background-color: grey; 
display:block; 
position:absolute; 
} 

#container { 
position:relative; 
width:300px; 
height:300px; 
min-width:300px; 
max-width:300px; 
} 

.a { 
position:relative; 
left:100px; 
width:200px; 
height:200px; 
} 

.d { 
left:0px; 
top: 200px;  
} 
.e { 
left:100px; 
top: 200px;  
} 
.f { 
left:200px; 
top: 200px;  
} 

TIA frgtv10

Answer 1

就您的情況而言，很容易：您知道佈局時，請將left的值「A」和其他元素的top值 - 100 x 200px。

對於未知空間和未知元素位置的更一般解決方案，只能在容器上應用網格/表格。

1. 讓您#container
2. 尺寸選擇一個網格間距（在你的情況：100px，讓整個空間在未知的佈局中使用1px的）
3. 建設規模「維」的二維數組/「網格間隔」（這裏：3x3）布爾值或零
4. 遍歷所有箱項目
   1. 獲得位置和盒子的尺寸
   2. 分通過網格間隔
   3. 增加的各個值的覆蓋計數（或設置爲true）陣列
5. 所述的空間仍然具有在網格0/false值。將它們的指標乘以網格間距以獲得座標。

對於獲取尺寸，jQuery的width/height函數可以幫助。對於職位，您需要閱讀top/left樣式值。當作爲內聯樣式編寫時，它們會更容易獲得，而不是樣式表中的id（甚至是一次使用的類）。