html - 柱子上的 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>