스켈레톤으로 중첩 된 격자를 설정하는 방법

Question

내 웹 사이트 페이지의 주요 컨텐츠 영역에 이미지와 컨텐츠의 격자를 추가하고 싶습니다. 기본 2 열 템플릿이 있고 큰 콘텐츠 영역에 표를 배치하고 싶습니다. 모든 것이 잘 작동하지만 세로로 크기를 조정하자마자 div 사이의 모든 여백이 느슨합니다. 나는 골격에있는이 품목을 분류하는 적당한 방법은 인 무엇 너무 확실하지 않다. 각 행마다 컨테이너를 종료해야합니까? 어떤 도움이나 제안이라도 대단히 감사합니다.

<div class="container"> 
    <div class="four columns"></div> 
    <div class="twelve columns"> 

     <!-- grid goes here --> 
     <div class="container"> 
     <div class="six columns alpha"></div> 
     <div class="six columns omega"></div> 
     <div class="six columns alpha"></div> 
     <div class="six columns omega"></div> 
     </div> 


    </div><!-- end twelve columns> 
</div><!-- end container --> 

Answer 1

나는 전에 아무도 대답하지 않았다. 나는 당신이 이미 이것을 풀어 놓았다고 가정합니다. 따라서이 답은 찾으려는 다른 누군가를위한 것입니다

container 클래스는 960 픽셀의 고정 너비를 가지고 있기 때문에 중첩 할 수 없습니다. 두 번째 문제는 내부에있는 열 (즉, 중첩하려는 열)이 열 개수를 초과한다는 것입니다. See the 'clearfix' class.

<div class="container"> 
    <div class="four columns">four columns</div> 
    <div class="twelve columns"> 
     <div class="sixteen columns clearfix">                             
      <div class="three columns alpha"> first</div> 
      <div class="three columns">second</div> 
      <div class="three columns">third</div> 
      <div class="three columns omega">fourth</div> 
     </div><!-- end clearfix --> 
    </div><!-- end twelve columns> 
</div><!-- end container --> 

Answer 2

나는이 대답은 알파와 오메가 사이의 열은 단지 세 개의 열을 표시하는 것이 었습니다 처음봤을 때 놓친 부분 : 즉석, 이것은 내가 찾은 깨끗한 솔루션이었다. 따라서 첫 번째 열은 알파를 사용하고 마지막 열은 오메가를 사용합니다. 초기 질문은 두 개의 알파와 오메가가 있기 때문에 작동하지 않습니다. CSS 알파와 오메가를 보면 왼쪽 (알파) 또는 오른쪽 (오메가)에 0px 여백 만 지정하면됩니다.