html - 列の 960gs の問題

Question

960gs12colでこんな感じのページを作りたい

私はhtmlを書きました：

<div class="container_12">
    <div class="grid_6"><img src="images/x.jpg" /></div>
    <div class="grid_6"><img src="images/x.jpg" /></div>

    <div class="grid_1"><img src="images/x.jpg" /></div>
    <div class="grid_1"><img src="images/x.jpg" /></div>
    <div class="grid_1"><img src="images/x.jpg" /></div>
    <div class="grid_1"><img src="images/x.jpg" /></div>
    <div class="grid_1"><img src="images/x.jpg" /></div>
    <div class="grid_1 suffix_6"><img src="images/x.jpg" /></div>
</div>

しかし、これは次のようになります。

これを行う方法はありますか？

Answer 1

各グリッドにはマージンがあり、インラインで表示されます。div の各セットを個別の列に配置し、alpha omega クラスを使用して最初/最後の div のマージンをそれぞれ削除する必要があります。

<div class="container_12">
  <div class="grid_6">
      <div class="grid_6 alpha omega"><img src="images/x.jpg" /></div>
      <div class="grid_1 alpha"><img src="images/x.jpg" /></div>
      <div class="grid_1"><img src="images/x.jpg" /></div>
      <div class="grid_1"><img src="images/x.jpg" /></div>
      <div class="grid_1"><img src="images/x.jpg" /></div>
      <div class="grid_1"><img src="images/x.jpg" /></div>
      <div class="grid_1 omega"><img src="images/x.jpg" /></div>
  </div>
  <div class="grid_6">
  <img src="images/x.jpg" />
  </div>
</div>