列上有960gs问题

Question

我想在960 gs 12 col中制作这样的页面

我写了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>