的CSS流动布局

我试图复制这种布局HTML/CSS：的CSS流动布局

我想我越来越接近我所需要的，但我无法摆脱垂直的divs之间的空间，这应该等于横向差距，我相信divs不会按照正确的顺序“下降”。

下面是代码：

<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; 
}

任何想法？

来源

2009-08-20 Marvin

非常有用的BTW，HTTP：// DOCTYPE。 com /已加入Stack-Overflow站点系列，doctype.com用于CSS /设计问题。你可能会在那里发布更好的成功（尽管它还不支持OpenID登录） – 2009-08-20 16:44:56

谢谢我一定会检查出它;） – Marvin 2009-08-21 09:38:37

最好保持这种动态无数字和定位爆炸你的头是使用jQuery和诸如此类的东西创建插件的巨额： http://mos.futurenet.com/pdf/computerarts/ART162_tut_dw2.pdf

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

来源

2009-08-20 15:18:59 Santi

对不起，错误的链接，现在更新。希望你找到一个css解决方案。 – Santi 2009-08-20 15:35:46

嘿，那第一个链接真的很有趣，虽然它使用jQuery它可能只是解决我的问题，即时测试它，谢谢。 – Marvin 2009-08-20 15:40:24

只是想说，第一个链接帮助我实现了预期的布局，但我不得不使用jQuery，它不是我希望的解决方案，也不知道是否有一个，但它是一个工作得很好。如果该链接在2009年6月由计算机艺术杂志发布的一篇教程题为“创建液体网格设计”，由Ben Wise撰写。现在，我把这个答案标记为正确的答案。谢谢Santi – Marvin 2009-08-21 09:42:37

既然你对所有的盒子都有确切的高度和宽度，并且你似乎对他们应该去的确切位置有了一个想法，那么使用绝对定位可能会更好。你将能够以这种方式更好地控制一切。

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

来源

2009-08-20 15:16:49

该widht是固定的，但高度是要调整到内容，由于缺乏内容在即时通讯使用CSS提供不同的高度测试布局，我的想法是调整到用户浏览器窗口宽度。 – Marvin 2009-08-20 15:21:12

即时通讯使用类，因为所有的div将生成与PHP，我只是真的需要一个类，但测试布局，并保持简单，现在即时通讯只使用几个div和固定属性;） – Marvin 2009-08-20 15:33:10

什么是重点使用类“只是现在”？在你的例子中使用一个类和一个id完全没有区别，所以它是如何使它更容易？ – 2009-08-20 16:50:30

上的一些注意事项您css

通常不好的做法是将边距/边距与宽度/高度混合。选择一个系统。 Tip 4 from this article
我想你会用grid system取得更好的成功。他们是有点困难入手，但他们的工作很大
如果你不想一格，尝试this article，我觉得在CSS世界

来源

2009-08-20 15:19:55 dassouki

嗨，请您详细说明为什么将边距/填充与宽度/高度混合是一种不好的做法，是否有更好的方法来实现div的分离？您链接的两个资源非常有用，谢谢。 – Marvin 2009-08-20 15:28:25

tip4 http://net.tutsplus.com/tutorials/html-css-techniques/10-principles-of-the-css-masters/ – dassouki 2009-08-20 16:36:48

我见过乔纳森斯诺克提示，我意识到你的评论家适用，谢谢花时间参考它。 – Marvin 2009-08-21 09:50:40

的CSS流动布局

回答

相关问题