获取容器中的空白区域

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（甚至是一次使用的类）。