CSS in Fluid 960 grid system

问题:

960 grid is great and after downloading it, I noticed that demo.html contains at the end examples of the .push and .pull classes like this one:

<div class="grid_6 push_6">
  <div class="grid_1 alpha">
    <p>
      60, class = "grid_6 push_6" => class = "grid_1 alpha"
    </p>
  </div>
  <!-- end .grid_1.alpha -->
  <div class="grid_5 omega">
    <p>
      380, class="grid_6 push_6" => class="grid_5 omega"
    </p>
  </div>
  <!-- end .grid_5.omega -->
  <div class="clear"></div>
  <div class="grid_3 alpha">
    <p>
      220, class="grid_6 push_6" => class="grid_3 alpha"
    </p>
  </div>
  <!-- end .grid_3.alpha -->
  <div class="grid_3 omega">
    <p>
      220, class="grid_6 push_6" => class="grid_3 omega"
    </p>
  </div>
  <!-- end .grid_3.omega -->
</div>
<!-- end .grid_6.push_6 -->

The home page gives a link to a fluid grid system under the title "Custom CSS Generator" which strangely skips to include the above test (press "preview" to see a test). I decided to add such a test as the css of the fluid grid DOES have these classes!

1) I immediately noticed that there is a problem when you try for example to set a background color in the outermost containing DIV: it doesn't fill the whole content to include my test (contained) cases at the bottom! What was more strange was the fact that when I used the .clearfix from the css file that I took from the original site (960.gs) the problem was fixed! i.e. this one:

.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after {
     content: ' ';
     display: block;
     overflow: hidden;
     visibility: hidden;
     font-size: 0;
     line-height: 0;
     width: 0;
     height: 0;
}

.clearfix:after,
.container_12:after {
     clear: both;
}

2) The biggest problem remain with my DIV test cases with classes "grid_6 pull_6" or "grid_6 push_6", which contain DIVs that are shrinked and don't expand in their full width!

Does anybody knows a solution for a fluid grid 960 template that does succeed to present the .pull and .push classes adjacent to each other?

See my point at jsbin.com: try to resize your browser (pixel sizes do not hold, use a picture as background to investigate further)

Thanks!

回答1:

This solves the problem: "percentages in block elements are based on the width of their parents". So, even if our "alpha" and "omega" classes are also class "grid_5" or "grid_3" they take 5 or 3 columns out of 12 of their containers which are "grid_6" and NOT of their grand-parent, i.e. "container_12"; that's the big difference from the static template where the measurements are hold on pixels and have nothing to do with parents or grand-parents.

The above calculations should be considered proportionally: a "grid_6" with 1% margins left and right per grid in a-just happened-960px container = a total width of 6*60+5*20 = 460px or 47.916%*960/100 (where the width in the CSS2 box model is defined as border+padding+context and not the broken one of <=IE7 in quirks mode).

Taken the above result of 460px for a "grid_3" child we should measure 22.916%*460/100 = 105.41px and Chrome Developer Tools gives us almost that number as long we resize the window to reach a 960px "container_12"!

Rule of thumb: "the sum of grids in a sub-container should be equal to 12".

So, the above example should become:

<div class="grid_6 push_6">
   <div class="grid_2 alpha">
      <p>60, class = "grid_6 push_6" => class = "grid_2 alpha"</p>
   </div>
   <!-- end .grid_2.alpha -->
   <div class="grid_10 omega">
      <p>380, class="grid_6 push_6" => class="grid_10 omega"</p>
   </div>
   <!-- end .grid_10.omega -->
   <div class="clear">&nbsp;</div>
   <div class="grid_6 alpha">
      <p>220, class="grid_6 push_6" => class="grid_6 alpha"</p>
   </div>
   <!-- end .grid_6.alpha -->
   <div class="grid_6 omega">
      <p>220, class="grid_6 push_6" => class="grid_6 omega"</p>
   </div>
   <!-- end .grid_6.omega -->
</div>

See at jsbin.com.