유체 왼쪽 열, 중앙 및 고정 중간 열 및 고정 오른쪽 열이있는 CSS 3 열 레이아웃

Question

나는이 주위에 내 머리를 감싸는 데 지쳐있다. 내가 여기서하려고하는 것은 약간의 비틀어 짐이있는 직선형 3 열 레이아웃을 만드는 것입니다. 센터의 "내용"열을 영원히 화면 중앙에두기를 바랍니다. 오른쪽에있는 열은 고정 폭이지만 왼쪽 열은 유동적으로 보이기를 바랍니다. 로고의 어떤 부분도 방해하지 않고 왼쪽 열에있는 로고가 980 픽셀의 와이드 스크린을 수용하도록 크기가 조정되지만 더 큰 해상도 화면의 경우 최대 450 픽셀로 이동하려고합니다.

--------------------------------------------------------------------------------- 
| Fluid, image  |          |     | 
| inside resizes |   Content column    | Nav column   | 
| max-width: 450px |   fixed width: 600px   | fixed width: 200px | 
| min-width: 180px |          |     | 
--------------------------------------------------------------------------------- 

다음은 내가 수행 할 수있는 최선의 방법이지만 음수 여백이있는 꽤 복잡한 방법입니다. 왼쪽 열이 완성 된 방식으로 "콘텐츠"열을 실제로 가운데에 놓을 수는 없습니다.

제안 사항? 감사!

jfiddle

Answer 1

당신이 display:table를 사용하는 경우, 당신은 하나를 사용하지 않고 테이블 레이아웃의 속성에 액세스 할 수 있습니다.

그런 다음에 가까운 무언가를 쉽게 얻을 수 있어야 당신이 찾고있는 무엇 : http://jsfiddle.net/v5yP3/4/

html { 
    background: yellow; 
} 
#wrapper { 
    margin: 0 auto; 
    max-width: 1250px; 
    min-width: 980px; 
    background: #fff; 
    display:table; 
} 
#leftcolumn, #rightcolumn { 
    display:table-cell; 
    width:450px; 
} 
#rightcolumn { 
    width:200px; 
} 
#contentcolumn { 
    display:table-cell; 
    width: 600px; 
    background: blue; 
} 
img { 
    width:180px; 
    min-width: 100%; 
    vertical-align:top; 
} 

편집 : 고정 올바른 콜럼 폭

Answer 2

당신이 IE9 compatibility 전적으로 관심을하지 않은 경우, Flexbox를 사용하여 열을 표시하는 것이 좋습니다.

HTML :

<div class='container'> 
    <div class='column left'>left</div> 
    <div class='column middle'>middle</div> 
    <div class='column right'>right</div> 
</div> 

CSS (스타일 제거) : (스타일링)

body, 
html { 
    height: 100%;  
} 

.container { 
    display: flex; 
    height: 100%; 
    width: 100%; 
} 

.left { 
    min-width: 180px; 
    max-width: 450px; 
    width: 100%; 
} 

.middle { 
    flex-shrink: 0; 
    width: 600px; 
} 

.right { 
    flex-shrink: 0; 
    width: 200px; 
} 

JSFiddle는 : http://jsfiddle.net/379MA/

하면 내가 추천 인 flexbox에 대한 자세한 내용을 찾고 있다면 CSS 트릭 가이드 :

flexbox에 대한 포괄적 인 가이드는 다음과 같습니다. nd 여기에 : http://css-tricks.com/snippets/css/a-guide-to-flexbox/