CSS流体布局 [英] Css fluid layout
问题描述
我正在尝试使用HTML/CSS复制此布局:
I'm trying to replicate this layout with HTML/CSS:
我认为我已经接近需要的水平，但是我无法摆脱div之间的垂直空间，它应该等于水平间隙，并且我相信div不会下降"正确的顺序.
I think I'm getting close to what I need, but I can't get rid of the vertical space between divs, wich should be equal to the horizontal gap, and I believe the divs are not "going down" in the right order.
这是代码:
<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
The best to keep that dynamic without exploding your head with numbers and positioning is to use JQuery and the huge amount of plugins created for that kind of stuff: http://mos.futurenet.com/pdf/computerarts/ART162_tut_dw2.pdf
http://www.chazzuka.com/blog/?p=47
这篇关于CSS流体布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
