这个开发不出来我就的衮蛋了。求帮助。关于给Div布局的。

Question

给一个xml文件解析后，得到一些top,heigth,left,width数据。需要在EXT弹出的window中画出相应的div。如图。一共六个div(一个大的嵌套五个小的)怎样写相应的html........

Answer 1

绝对定位？给了left top width和height后  感觉可以用定位了啊 

Answer 2

中间的div其他的自适应，可以给一个比例。如果宽高是固定的话那更好了，直接给宽高就ok了

Answer 3

<div  style="position:relative;background-image:image/Koala.jpg;width:510px;height:510px" ><div left:0;top:0; style=" border-style:solid;border-width:2px;border-color:#000;position:relative;background-color:pink;width:250px;height:250px;">&nbsp;</div><div left:250;top:0; style=" border-style:solid;border-width:2px;border-color:#000;position:relative;background-color:pink;width:250px;height:250px;">&nbsp;</div><div left:0;top:250; style=" border-style:solid;border-width:2px;border-color:#000;position:relative;background-color:pink;width:250px;height:250px;">&nbsp;</div><div left:250;top:250; style=" border-style:solid;border-width:2px;border-color:#000;position:relative;background-color:pink;width:250px;height:250px;">&nbsp;</div></div>
这是代码  出来的结果却是这样  一个四个 

Answer 4

外边包一个div，固定宽度，里面的DIV固定宽度
float：left；
就好了嘛......
哪那么麻烦...
另外，你CSS写成一坨，到时候修改的时候怎么改...

Answer 5

。。直接写个9宫格的 table （3行3列）
根据需要合并单元格就可以了

Answer 6

我这里的div个数 div位置和大小都是不定的 是根据xml解析出来的。能解析出来每个div的高宽和绝对位置。你教教我怎么样写才好呗

Answer 7

   <div style="valign:top;width:200;height:200;border:solid 1px red;background-color:#fff;" >
    <div style="valign:top;width:148;height:50;border:solid 1px red;background-color:#fff;float:left" ></div>
    <div style="valign:top;width:48;height:150;border:solid 1px red;background-color:#fff;float:right" ></div>
    <div style="valign:top;width:48;height:148;border:solid 1px red;background-color:#fff;float:left" ></div>
    <div style="valign:top;width:98;height:98;border:solid 1px red;background-color:#fff;float:left" ></div>
    <div style="valign:top;width:148;height:48;border:solid 1px red;background-color:#fff;float:right" ></div>
    </div>

Answer 8

样式是不定的，你的这个代码就固定死了。div数目和布局是不定的。。想知道  如何用绝对定位把每个div定位到不同位置上，，，，求解答～～～～～  - 。 -

Answer 9

这次的模板有五个div，说不定下一个就是六个或者三个，div 的数量是变化的如此一来就写死了啊。

Answer 10

这次的模板有五个div，说不定下一个就是六个或者三个，div 的数量是变化的如此一来就写死了啊。
那你就像这样布局呗 借鉴下  我又不知道你解析出来的是什么。

Answer 11

首先，确定大DIV（相对定位，宽高），再根据数据输出多个小DIV（绝对定位，宽高，位置），这样完全没有问题的因为所有的小DIV肯定是在大DIV里的，所以：
var w = 0;
var h = 0;
var temp;
for(var div in data) {
    temp = data[div][left] + data[div][width];
    if(w < temp) {
        w = temp;
    }
    temp = data[div][top] + data[div][height];
    if(h < temp) {
        h = temp;
    }    
}
最后的w,h就是大DIV的尺寸，这个得到，其它就好说了当然，可能实际要复杂一些，比如有些小div没有left,只有right;

Answer 12

<div  style="position:relative;background-image:image/Koala.jpg;width:510px;height:510px" >
<div style="left:0;top:0;border-style:solid;border-width:2px;border-color:#B8B8B8;position:absolute;background-color:#DBDBDB;width:250px;height:250px;">&nbsp;</div>
<div style="left:250;top:0;border-style:solid;border-width:2px;border-color:#B8B8B8;position:absolute;background-color:#DBDBDB;width:250px;height:250px;">&nbsp;</div>
<div style="left:0;top:250;border-style:solid;border-width:2px;border-color:#B8B8B8;position:absolute;background-color:#DBDBDB;width:250px;height:250px;">&nbsp;</div>
<div style="left:250;top:250;border-style:solid;border-width:2px;border-color:#B8B8B8;position:absolute;background-color:#DBDBDB;width:250px;height:250px;">&nbsp;</div>
</div>
试试这样

Answer 13

div { position:relative; top:-3px; left:6px; } 绝对定位就这样top：是距浏览器顶端，left：是距浏览器左端
bottom：下，right 右