Css fluid布局
Css fluid布局
提问于 2009-08-20 15:10:49
我正在尝试用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;
}有什么想法吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2009-08-20 15:18:59
保持这种动态性而不被数字和定位搞得头晕目眩的最好办法是使用JQuery和为这类东西创建的大量插件：http://mos.futurenet.com/pdf/computerarts/ART162_tut_dw2.pdf
http://www.chazzuka.com/blog/?p=47
Stack Overflow用户
发布于 2009-08-20 15:19:56
关于css的一些注意事项
- 将页边距/填充与宽度/高度混合通常是不好的做法。选择一个系统。Tip 4 from this article
- I认为使用grid system会取得更好的成功。开始使用它们有点困难，但是它们工作得很好
- 如果你不想要网格，可以试试this article，我发现它在css的世界
中非常有用。
Stack Overflow用户
发布于 2009-08-20 15:16:49
既然你有所有盒子的确切高度和宽度，而且你似乎知道它们应该去的确切位置，你可能更好地使用绝对定位。这样你就能更好地控制一切。
此外，您应该对这些类使用ids，而不是<div>，因为它们只会被使用一次。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1306844
复制相关文章
相似问题
腾讯云开发者
