我正在尝试使用HTML / CSS复制此布局:
http://reformrevolution.com/
我认为我已经接近需要的位置,但是我无法摆脱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