1

我正在尝试使用http://www.tinyfluidgrid.com/创建一个流畅的布局

我想在正文 (grid_16) 内创建一个 2 列布局 (grid_12) 但左栏 (grid_4) 和右栏没有包裹整个身体所以我该怎么办：

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>#</title>
 <link rel="stylesheet" href="grid.css" type="text/css" media="screen" charset="utf-8">
 <style type="text/css" media="screen">
 /*
  & A little bit of styling
  */
 body {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
 }

 h1 {
  border: solid 1px black;
  text-align: center;
  padding: 10px;
 }
 </style>
</head>

<body>

 <div class="container clearfix">
  <div class="grid_24">
   <h1>topbar 24</h1>
  </div>
  <div class="grid_24">
   <h1>logo 24</h1>
  </div> 
  <div class="grid_24">
   <h1>menu 24</h1>
  </div>

  <div class="grid_4">
   <h1>4</h1>
  </div>

  <!-- -->
  <div class="grid_16">
   <h1>16</h1>
      <div class="grid_12">
        <h1>12/16</h1>
      </div>   
      <div class="grid_12">
        <h1>12/16</h1>
      </div>    
  </div>
  <!-- -->

  <div class="grid_4">
   <h1>4</h1>
  </div>


  <div class="grid_24">
   <h1>24</h1>
  </div>
 </div>

</body>
</html>

在CSS下面：

/*
 & Columns : 24 
 & Gutter %: 20% 
 & MinWidth: 800px
 & MaxWidth: 1200px
 */
.grid_1 { width: 3.3333333333333%; }
.grid_2 { width: 7.5%; }
.grid_3 { width: 11.666666666667%; }
.grid_4 { width: 15.833333333333%; }
.grid_5 { width: 20%; }
.grid_6 { width: 24.166666666667%; }
.grid_7 { width: 28.333333333333%; }
.grid_8 { width: 32.5%; }
.grid_9 { width: 36.666666666667%; }
.grid_10 { width: 40.833333333333%; }
.grid_11 { width: 45%; }
.grid_12 { width: 49.166666666667%; }
.grid_13 { width: 53.333333333333%; }
.grid_14 { width: 57.5%; }
.grid_15 { width: 61.666666666667%; }
.grid_16 { width: 65.833333333333%; }
.grid_17 { width: 70%; }
.grid_18 { width: 74.166666666667%; }
.grid_19 { width: 78.333333333333%; }
.grid_20 { width: 82.5%; }
.grid_21 { width: 86.666666666667%; }
.grid_22 { width: 90.833333333333%; }
.grid_23 { width: 95%; }
.grid_24 { width: 99.166666666667%; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16,
.grid_17,
.grid_18,
.grid_19,
.grid_20,
.grid_21,
.grid_22,
.grid_23,
.grid_24 {
 margin-left: 0.41666666666667%;
 margin-right: 0.41666666666667%;
 float: left;
 display: block;
}

.alpha{margin-left:0px;}
.omega{margin-right:0px;}

.container{
 min-width: 800px; 
 max-width: 1200px; 
 margin: auto;
}

/* @
 * tinyfluidgrid.com
 & girlfriendnyc.com
 */

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
4

0 回答 0