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を左上に揃える必要があります。しかし、私が必要とする正確な場所にとどまるために1つのdivが必要です(「緑」のdivがウィンドウの中央に配置されるように)。フィドルでは、p17 と p18 が他の div とまったく同じように配置されていないことがわかります。これらの div の上にスペースがあります。これらの 2 つの div をそのスペースに配置する必要があります。マージンを与えずにこれを修正するにはどうすればよいですか。
そして、新しい div を追加する場合は、それらの div を他の div に自動的にアタッチする必要があります。デモと同じように、スペースを空ける必要はありません。これを行う方法はありますか。
check the [Demo][1]
|__|| || || |
| ||__||_____|| |
| || ||___|
|__||_________||___|
| || || |
|__||______||______|
![drawing][2]
i need align all divs in the above demo, like this drawing.
