960gs на колоннах

Question

Я хочу сделать страницу, как это в 960 гс 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 для удаления полей в первом/последнем divs соответственно.

<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>