html - Css 流体布局

我正在尝试使用 HTML/CSS 复制此布局:

我想我已经接近我需要的了，但是我无法摆脱 div 之间的垂直空间，它应该等于水平间隙，而且我相信 div 不会“下降”正确的顺序。

代码如下:

<body>
<div class="Main">
<div class="Diagrama1">
</div>
<div class="Diagrama2">
</div>
<div class="Diagrama3">
</div>
<div class="Diagrama4">
</div>
<div class="Diagrama1">
</div>
<div class="Diagrama3">
</div>
<div class="Diagrama3">
</div>
<div class="Diagrama2">
</div>
<div class="Diagrama1">
</div>
<div class="Diagrama2">
</div>
</div>
</body>

还有 CSS:

@charset "UTF-8";
/* CSS Document */

.Main {
overflow:auto;
background-color:#CCC;
display:compact,
}

 .Diagrama1 {
float:left;
width:180px;
height:260px;
background-color:#00F;
margin:15px;    
 }

 .Diagrama2 {
float:left;
width:180px;
height:150px;
background-color:#F00;
margin:15px;
 }

 .Diagrama3 {
float:left;
width:180px;
height:320px;
background-color:#F0F;
margin:15px;
 }

 .Diagrama4 {
float:left;
width:180px;
height:200px;
background-color:#CF0;
margin:15px;
 }

有什么想法吗？

最佳答案

保持这种动态而又不让数字和定位爆炸的最好方法是使用 JQuery 和为这类东西创建的大量插件: http://mos.futurenet.com/pdf/computerarts/ART162_tut_dw2.pdf

http://www.chazzuka.com/blog/?p=47

关于html - Css 流体布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1306844/