960 css 프레임 워크, 알파/오메가 문제

960 CSS 프레임 워크를 사용하여 메신저. 문제는 3 열 레이아웃에서 전체 960 너비를 사용하려고하는 것입니다. 그래서 컨테이너 16을 사용하고 그리드와 함께 3 개의 div를 사용합니다. 첫 번째와 마지막 그리드에서 알파와 오메가를 사용하여 왼쪽과 오른쪽 거터를 제거합니다. 알파 제본기는 제거하지만 오메가 제본기는 제거하지 않습니다.960 css 프레임 워크, 알파/오메가 문제

<div class="container_16" id="section_body"> 
    <div class="grid_3 alpha" style="background:red;">body left</div> 
    <div class="grid_10" style="background:green;">body</div> 
    <div class="grid_3 omega" style="background:blue;">body right</div> 
</div>

부 본체의 CSS는 다음과 같습니다 : 다음은 HTML입니다

#section_body { 
    min-height:500px; 
    overflow:hidden; 
    background:#fff; 
}

여기에 문제 오 스크린 샷입니다, 당신은 바로 모든 길을 갈 블루 나던의 마지막 사업부를 볼 수 있습니다 . 내가 도대체 뭘 잘못하고있는 겁니까?

enter image description here

UPDATE 나는 960 CSS를 제외한 모든 스타일과 3 명 개의 div를 제거 시도하고 난 여전히 같은 문제가 있습니다. 무슨 일이 있어도 전체 960px 너비로 갈 수 있습니다. 너비는 940 픽셀입니다.

출처

2011-08-05 John

왼쪽 및 오른쪽 열 너비가 160 픽셀이므로 왼쪽 및 오른쪽 여백이 10-10px이므로 추가 20px입니다. 중앙 열은 580 픽셀이고 너비는 10-10 픽셀입니다.

그래서 160 + 10 + 160 + 10 + 580 + 20 = 940px

선택한 3 열 배치는 20 픽셀 얇다.

다음 예는 각면에 10-10 px 거터가 있으므로 데드 센터입니다.

<div class="container_16" id="section_body" style="background-color:#CCCCCC"> 
<div class="grid16"> 
    <div class="grid_3" style="background:red;">body left</div> 
    <div class="grid_10" style="background:green;">body</div> 
    <div class="grid_3 omega" style="background:blue;">body right</div> 
</div> 
</div>

출처

2011-08-06 00:50:40 Jauzsika

그래서 세 번째 DIV로 채워 나머지 20 픽셀 자동을 얻는 방법? 폭을 180px로 수동 설정 하시겠습니까? – John

내 2 센트는 다음과 같습니다 : forget css frameworks. – Jauzsika

사실이 주제에 관한 주제는 아닙니다. 내가 알아낼 것 같아. 도와 주셔서 감사합니다! – John

경고 :이 경우에도 그것을해야하지 (때문에 "container_16"과의 작업을하게 Jauzsika의 코드에 오타 (대신 "grid_16"의 "grid16")가있다 누락 된 "알파").

는 정답

가 명심해야 할 두 가지 중요한 일이 있습니다

1) 디자인으로는, 960gs 실제 내용 영역 즉, 왼쪽 10px 및 오른쪽 여백을 가지고는 폭 940px입니다 .

2) 중첩 된 격자를 사용하는 경우에만이 경우에만 하위 요소에 특수 클래스가 필요합니다. 첫 번째 아이는 클래스 "alpha"가 필요하고 마지막 아이는 클래스 "omega"가 필요합니다.

코드에 하위 div가 없으므로 "alpha"및 "omega"가 필요하지 않습니다.

그래서, 두 솔루션은 (수정 코드) 동일합니다

<div class="container_16" id="section_body" style="background-color:#CCCCCC"> 
    <div class="grid_3" style="background:red;">body left</div> 
    <div class="grid_10" style="background:green;">body</div> 
    <div class="grid_3" style="background:blue;">body right</div> 
</div> 

<div class="container_16" id="section_body" style="background-color:#CCCCCC"> 
<div class="grid_16"> 
    <div class="grid_3 alpha" style="background:red;">body left</div> 
    <div class="grid_10" style="background:green;">body</div> 
    <div class="grid_3 omega" style="background:blue;">body right</div> 
</div> 
</div>

출처

2011-12-12 14:05:21

나는 Vincent에 동의한다. John의 문제를 일으키는 '알파'및 '오메가'CSS 클래스입니다.빈센트의 코드가 자리하고 있습니다. –

+1은 잘 설명되어 있습니다. – Hoque

960 css 프레임 워크, 알파/오메가 문제

답변

관련 문제