고정 플루이드 고정 레이아웃 960.gs

저희 웹 사이트 엔진은 960.gs 그리드 시스템을 사용하며 고정 (100px) - 유동 (최대 폭) - 고정 (100px)보기로 수정하려고합니다. 불행하게도 모든 960.gs 온라인 생성기는 완전 고정 또는 완전 유동 그리드를 만듭니다.고정 플루이드 고정 레이아웃 960.gs

<------------100%---------------> 

======== =============== ======== 
| fixed| |max to screen| |fixed | 
======== =============== ======== 

<-100px>     <-100px>

강령 (변경 후) : http://jsfiddle.net/vZm8x/

문제 1) 나는 중앙의 콘텐츠 영역을 만드는 방법을 모르겠습니다 그래서 나는이보기에 원래 생성 된 전체 유체 그리드를 수정하려합니다 화면 왼쪽에 최대 입니다. 왜냐하면 너비 : 자동; width : 100 % 그냥 div를 래핑합니다.
문제 2) 100px의 모든 div에 고정 된 후 아무 것도 의 내용을 계속 포장합니다. (디스플레이 : 인라인, 아이디어가 도움이되지 않습니까?)

내 질문은 : 우리의 필요에 따라 960.gs 템플릿을 수정할 수 있습니까? 그렇다면 문제점을 해결하기위한 조언을 해주십시오. 미리 감사드립니다.

출처

2013-03-04 Ken Tang

고정 너비의 측면 열을 사용하면 실제로 매우 쉽습니다. 플로트를 사용하려는 경우 특정 디자인 요구에 따라 faux columns 트릭을 수행해야 할 수 있습니다.

<div class="left"></div> 
<div class="right"></div> 
<div class="middle">Content</div>

과 :

div { 
    /* border-box, to make sure "width" is our intended width */ 
    -moz-box-sizing: border-box; /* Firefox still uses prefix */ 
    box-sizing: border-box; 
} 

.left { 
    float: left; 
    width: 100px; 
    background: #f00; 
} 

.right { 
    float: right; 
    width: 100px; 
    background: #00f; 
} 

.middle { 
    width: 100%; 
    padding: 0 100px; 
    background: #ccc; 
}

See it in action here (이 가짜 열 효과없이,하지만 당신에게 시작점을 제공해야합니다)

는 당신의 라인을 따라 뭔가를 할 것입니다. 출력으로 섹션의 너비를 변경하면 열이 그대로 유지되고 내용이 외부 열의 경계 내에 유지됩니다.

콘텐츠 열은 문서 흐름에 있기 때문에 마지막 열이어야하므로 오른쪽 열이 콘텐츠 아래로 끝납니다.

또는이 같은 것을 사용하여 측면 열에 position: absolute;를 사용할 수 있습니다

.wrapper { 
    position: relative; /* Constrains the columns within their parent. Not needed if parent is <body> */ 
} 

.left { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.right { 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

.middle { 
    padding: 0 100px; 
} 

div { 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

이 트릭은 IE8 +, 파이어 폭스, 크롬, 사파리, 오페라에서 작동합니다. IE7은 W3C 박스 모델 ("content-box")을 사용하고 box-sizing CSS를 인식하지 못하기 때문에 문제가 될 수 있지만, 필요하다면 there are a few tricks을 사용하면 문제가 될 수 있습니다. 그것은 기본적으로 "테두리 상자"기반 상자 모델을 사용하기 때문에 IE6은 괜찮습니다. (당신은 너무, 다음 .middle{ position: relative; z-index: 1}을 설정합니다. IE는 행동을 얻을 z-index 놀 필요가 있고 왼쪽과 오른쪽 컬럼에 z-index: 2을 추가 할 수 있습니다.)

position: absolute 트릭을 당신의 사이드 바는 점에서 플로트 하나를 통해 이점을 가지고 않습니다 콘텐츠 div 앞이나 뒤에 나타날 수 있으므로 더 의미 론적 옵션이 될 수 있습니다.

a) 측면 열이 고정되어 있으므로 패딩을 해당 열의 너비로 설정하고 b) position: absolute 및 float: [left/right]을 요소 흐름에서 제외하면 이러한 작업이 발생하는 이유는 다음과 같습니다. 문서에 관한 한, 그들은 거기에 없으며 공간을 차지하지 않습니다. 이렇게하면 다른 요소가 그 요소가 있던 곳으로 이동할 수 있습니다.

출처

2013-03-04 14:18:29 Shauna

고정 플루이드 고정 레이아웃 960.gs

답변

관련 문제