960 그리드 경계 혼란.

Question

나는 이것이 css를 통해 간단하고 무언가 내 경험이되기를 바라고 있습니다. 난 단순히 중첩 div 그룹에 단일 픽셀 테두리를 추가하려고합니다. 여기

<div class="grid_11 suffix_1"> 
    <div class="borderupdown"> 
    <div class="grid_1 alpha"> 
     <p>RNK</p> 
    </div> 
    <div class="grid_1"> 
     <p>IQ</p> 
    </div> 
    <div class="grid_8 omega"> 
     <div class="grid_8 alpha"> 
     <p>title<p> 
     </div> 
     <div class="clear"></div> 
     <div class="grid_8 omega"> 
     <p>comments stuff here</p> 
     </div> 
    </div> 
    </div> 
</div> 

는 클래스 borderupdown 단순히 1 픽셀의 경계 상단과 하단입니다 borderupdown CSS의

.borderupdown 
{ 
    border-top:1px solid red; 
    border-bottom:1px solid red; 
    margin-bottom:2px; 
} 

입니다. 내 "이해"는 다른 div가 해당 클래스 아래에 중첩되어 있기 때문에 모든 div의 상단과 하단을 만들어야한다는 것입니다. 대신 두 테두리를 시각적으로 위에 표시하고 둘 사이의 2 픽셀 여백을 얻습니다. 나는 왜 그렇게 혼란 스럽다. (중요한 경우 960 그리드 시스템의 유체 버전을 사용하고 있습니다.)

감사합니다.

Answer 1

컨테이너 내에서 떠 다니는 요소가 컨테이너의 차원에 포함되지 않는 문제를 발견 한 것 같습니다. (나는 다른 사람들이 그 말의 더 좋은 방법을 가지고 있다고 확신한다 ...). 플로팅 요소는 기본적으로 컨테이너의 크기 계산에 포함되지 않습니다. 당신이 찾고있는 것은 "clearfix"라고합니다. 이 게시물에서 수정 사항 목록을 확인하십시오. What methods of ‘clearfix’ can I use?