javascript - 不同大小的 div 左上对齐

Question

CSS

  #box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8, #box9, #box10, #box11, #box12, #box13, #box14, #box15, #box16, #box17, #box18, #box19, #box20 {
    position: relative;
    list-style: none;
    float: left;
clear:left:
}
#box1 {
    width: 60px;
    height: 60px;
    background: yellow;
}
#box2 {
    width: 80px;
    height: 50px;
    background: blue;
}
#box3 {
    width: 40px;
    height: 60px;
    background: red;
}
#box4 {
    width: 200px;
    height: 150px;
    background: green;
}
#box5 {
    width: 60px;
    height: 100px;
    background: red;
}
#box6 {
    width: 70px;
    height: 30px;
    background: blue;
}
#box7 {
    width: 40px;
    height: 80px;
    background: yellow;
}
#box8 {
    width: 90px;
    height: 60px;
    background: red;
}
#box9 {
    width: 50px;
    height: 80px;
    background: blue;
}
#box10 {
    width: 40px;
    height: 60px;
    background: yellow;
}
#box11 {
    width: 60px;
    height: 60px;
    background: yellow;
}
#box12 {
    width: 80px;
    height: 50px;
    background: blue;
}
#box13 {
    width: 40px;
    height: 60px;
    background: red;
}
#box14 {
    width: 100px;
    height: 50px;
    background: yellow;
}
#box15 {
    width: 60px;
    height: 100px;
    background: red;
}
#box16 {
    width: 70px;
    height: 30px;
    background: blue;
}
#box17 {
    width: 40px;
    height: 80px;
    background: yellow;
}
#box18 {
    width: 90px;
    height: 60px;
    background: red;
}
#box19 {
    width: 50px;
    height: 80px;
    background: blue;
}
#box20 {
    width: 40px;
    height: 60px;
    background: yellow;
}

我需要将多个 div 左上角对齐，div 之间没有任何空格。但我需要一个 div 来保留我需要的确切位置(例如窗口中心的“绿色”div)。在 fiddle 中，您可以看到 p17 和 p18 的位置与其他 div 不完全相同。这些 div 上方有空间。我需要将这两个 div 放入该空间。如何在不留边距的情况下解决这个问题。

如果我添加新的 div，我需要自动将这些 div 与其他 div 附加在一起，就像在演示中一样，没有空格。有什么办法可以做到这一点。

check the [Demo][1]


|__||  ||     ||   |
|  ||__||_____||   |
|  ||         ||___|
|__||_________||___|
|  ||      ||      |
|__||______||______|

![drawing][2]

i need align all divs in the above demo, like this drawing.

http://jsfiddle.net/ramswarnak/G8dKr/8/

http://i.stack.imgur.com/MbLLf.png

Answer 1

请添加这个CSS:

#box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8, #box9, #box10, #box11, #box12, #box13, #box14, #box15, #box16, #box17, #box18, #box19, #box20 {   margin:0px; padding:0px; float: left; }

ul, li {  margin:0px; padding:0px; list-style:none;}