Css fluid layout | 易学教程

问题

I'm trying to replicate this layout with HTML/CSS:

http://reformrevolution.com/

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.

Here is the code:

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

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

Any ideas?

回答1:

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

回答2:

some notes on your css

It's usually bad practice to mix, margins/paddings with widths/heights. Choose one system. Tip 4 from this article
I think you'll have better success using a grid system. They're a bit tough to start with, but they work great
If you don't want a grid, try this article that i find very useful in the css world

回答3:

Since you have exact heights and widths for all the boxes and you seem to have an idea of the exact place they should go, you might be better off just using absolute positioning. You'll be able to control everything better that way.

Also, you should use ids for those <div>s, not classes, since they're only going to be used once.

来源：https://stackoverflow.com/questions/1306844/css-fluid-layout

标签

html

css

layout