Css fluid layout

牧云@^-^@ 提交于 2020-02-29 05:30:00

问题


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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!