Question

我正在尝试使用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;
 }

有什么想法吗？

Answer 1

最好保持这种动态，而不是用数字和定位来爆发你的头脑是使用JQuery和为这种东西创建的大量插件： http://mos.futurenet.com/pdf/computerarts/ART162_tut_dw2.pdf

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

Answer 2

关于你的css的一些注释

混合，边距/填充与宽度/高度通常是不好的做法。选择一个系统。 Tip 4 from this article
我认为使用grid system会有更好的成功。他们有点难以开始，但他们工作得很好
如果您不想要网格，请尝试我在css世界中发现非常有用的this article

Answer 3

由于你拥有所有盒子的精确高度和宽度，并且你似乎已经知道它们应该去的确切位置，你可能最好只使用绝对定位。你将能够以这种方式更好地控制一切。

此外，您应该为那些<div>使用ID，而不是类，因为它们只会被使用一次。

Css流体布局

3 个答案: