960.gs를 사용하여 왼쪽과 오른쪽 거터를 서로 다른 색으로 만드는 방법은 무엇입니까?

Question

960.gs를 사용하여 왼쪽과 오른쪽 거터를 서로 다른 색으로 만드는 방법은 무엇입니까? 다음과 같은 간단한 것을 시도해보십시오.

<div style="background-color: green"> 
    <div class="container_16"> 
    <div class="grid_16"> 
     test 
    </div> 
    </div> 
</div> 
<div style="background-color: cyan"> 
    <div class="container_16"> 
    <div class="grid_16"> 
     test 
    </div> 
    </div> 
</div> 

녹색 및 시안 색은 무시됩니다. 어떤 이유로 "grid_16"클래스가 색상을 제거하는 것처럼 보입니까? 내 목표는 페이지의 다른 섹션을 페이지 전체에 걸쳐 서로 다른 색상으로, 심지어는 960 개 이상의 픽셀까지 가질 수 있다는 것입니다. 따라서 누군가가 브라우저를 1200 픽셀로 만들면 왼쪽과 오른쪽의 색상이 오른쪽이고 그리드 시스템의 나머지 부분은 모두 중간에있는 960 픽셀 내에 포함됩니다.

'body'에 배경색을 추가하여 단 ​​1 색상 만 사용할 수는 있지만 페이지에 여러 색상이 필요합니다. 다른 색깔의 가로 줄무늬처럼. 감사.

Answer 1

이유를 이해하려면 그리드 레이아웃이 어떻게 작동하는지 이해해야합니다.

그리드에 특정 너비를 지정하면 플로팅이됩니다. 외부 div의 높이가 0px임을 의미합니다. 그래서 요컨대. 아무 것도 표시되지 않기 때문에 배경색이 제거되지 않고 표시되지 않습니다. 그리드가 그 위에 떠 다니므로 실제 크기는 중요하지 않습니다.

해결하려면, 단지 용기에 clearfix를 추가하고 해결해야합니다. 그러나, 당신은 또한 div의 기본적 당 배경색을 상속에 대해 생각해야합니다.

이

<div style="background-color: green"> 
    <div class="container_16 clearfix" style="background:white"> 
     <div class="grid_16"> 
     test 
     </div> 
    </div> 
    </div> 
    <div style="background-color: cyan"> 
    <div class="container_16 clearfix" style="background:white"> 
     <div class="grid_16"> 
     test 
     </div> 
    </div> 
    </div> 

Answer 2

두 개의 그리드 컨테이너를 튀어 나와 나란히이 아니다 매우 똑똑한 방법으로 가로 줄무늬를 만들 수 있습니다. 일부 컨테이너를 그리드의 경계를 벗어나게하고, 여백을 적절히 조정하거나, 그리드의 뒤쪽 (바깥 쪽)에 그리지 않게하려면