HTML/CSS : 3 열, 변수면 및 가운데 맞춤 가운데 열

Question

내 머리 부분에 문제가 있습니다. 그래서 기본적으로 3 열의 div가 있습니다. 가운데 하나가 980 픽셀의 일정한 너비를 갖기를 원하면 헤더의 왼쪽이 파란색 배경색이있는 브라우저 창의 끝까지 확장되기를 원합니다. 헤더의 오른쪽에 대해서는 검정색 배경 색상으로 브라우저의 오른쪽 끝까지 확장하고 싶습니다. 종류는 다음과 같습니다.

< ------------------------------ [blue] [center header] [center header] 검정] ---------------------------->

나는 내 연구를했는데 지금까지 찾을 수있는 건 두 가지 뿐이다. 왼쪽 열이 고정 된 열과 오른쪽 열이 나머지 공간을 채우는 열 어떻게 내 문제에 적용 할 수 있을지 궁금해?

<div style="width:100%;"> 
    <div style="display:table-cell; background-color:blue;"></div> 
    <div style="width: 980px;">my header</div> 
    <div style="display:table-cell; background-color:black;"></div> 
</div> 

감사합니다 : 같은

그것은겠습니까!

Answer 1

간단한 해결책 - basicaly 정확한 stying를 사용하지만, 중앙 table-cell ELEM 다른 block 퍼팅 천만에, 여기 span 같은 : 나는 모든 별도의 CSS 블록에 인라인 스타일과 사용 클래스 선택기 이동

<div class="wrapper"> 
    <div class="left"></div> 
    <div class="center"><span>my header</span></div> 
    <div class="right"></div> 
</div> 

: 여기

.wrapper { 
    display:table; 
    width:100%; 
} 
.left { 
    display:table-cell; 
    width:50%; 
    background-color:blue; 
} 
.right { 
    display:table-cell; 
    width:50%; 
    background-color:black; 
} 
.center { 
    display:table-cell; 
} 
.center span { 
    display:inline-block; 
    width:900px; 
} 

내가 만든 여기 jsfiddle

하고있다 더 나은 일러스트레이션을 위해 훨씬 좁은 중심 :

희망 사항 :)

Answer 2

불행하게도 넓은 상호 호환성을 지원하는이 작업을 수행하는 슈퍼 부드러운 방법이 없습니다. flex 또는 flexbox라고하는 디스플레이 용 CSS 규격이 있습니다. 원하는 사양대로 아름답게 우아하게 처리 할 수 ​​있지만 현재로서는 지원이 매우 제한적입니다. 여기

한편

http://css-tricks.com/old-flexbox-and-new-flexbox/

, 당신은 당신이 원하는 걸 얻을 것이다 몇 가지 기본적인 CSS의 속임수로 원하는 레이아웃을 달성 할 수있다 ... 당신의 열람 인 flexbox에 일부 리소스를이지만, 필요 절대 위치를 중간 div.

을 heres JSFiddle

: 무엇 여기 벌어지고

.left { 
    width: 50%; 
    height: 300px; 
    float: left; 
    padding-right: 160px; 
    box-sizing: border-box; 
    background: red; 
} 

.right { 
    width: 50%; 
    height: 300px; 
    float: right; 
    padding-left: 160px; 
    box-sizing: border-box; 
    background: blue; 
} 

.middle { 
    position: absolute; 
    width: 300px; 
    height: 300px; 
    left: 50%; 
    padding: 10px; 
    margin-left: -150px; 
    box-sizing: border-box; 
    background: orange; 
} 

당신은 요청할 수 있습니다 : 여기 http://jsfiddle.net/CW5dW/

는 CSS입니까?

기본적으로 div를 중간 클래스로 가져와 문서의 흐름에서 제거하고 있습니다. 이것은 브라우저의 모든 공간을 유동적으로 차지하기 위해 왼쪽 div 왼쪽과 오른쪽 div 오른쪽으로 50 %의 너비로 플로팅 할 수 있습니다.

그러면 중간 div에 300px 공간 (귀하의 경우 980)을 사용하게하고 왼쪽에서 브라우저의 전체 너비의 50 %가되도록 지시합니다. 이것은 div의 왼쪽 가장자리에서 계산 되었기 때문에 중심에 있지 않습니다. 그래서 div의 중심에 왼쪽 가장자리가있는 "이동"을 선택하기 위해 너비의 반의 음의 여백 공간을줍니다.

중간 div의 너비가 300px (귀하의 경우 980)이므로 우리는 왼쪽 div의 오른쪽 가장자리에 중간 divs의 너비보다 크거나 같은 여백이 있어야한다고 말할 수 있습니다 , 예를 들어 150 픽셀이고 10 픽셀을 더 추가하여 텍스트가 div의 가장자리까지 올 수 없으므로 총 160 픽셀이됩니다. 우리는 똑같은 일을하지만 그 일은 왼쪽에 있습니다. 이렇게하면 두 div의 내용이 중간 div 아래로 떨어집니다.

Answer 3

이 답변은 "답변"과 같지 않습니다. @ 마이클의 게시물에 대한 확장 된 의견입니다. 그러나 나는 다른 대답, 즉 jQuery 솔루션을 게시했다.

@ 마이클의 답변 (실제로는 매우 깔끔한 해결책입니다)은 높이 선언 (OP가 의심 할 여지없이)을 제거하면 다양한 열의 배경이 노출된다는 작은 문제가 있습니다.이 방법은 배경을 모두 아래쪽 가장자리에 수평을 맞추어 디자인을 일관되게 만듭니다. OP의 디자인에 기둥 뒤에 배경이없는 경우이 솔루션이 좋을 것입니다. 배경이 필요한 경우 (질문 문구로 판단 할 수 있음) 어색 할 수 있습니다. 이 두 솔루션 ...

1. 컬럼 길이의 페이지를 검색하는 간단한 자바 스크립트, 가장 긴 발견, 최대 모든 짧은 것들과 일치합니다.

2. 그 밖의 (그리고 아마도 더 나은) 해결책은 이미 그 위에있는 열과 함께 배경을 떨어 뜨리는 것입니다 (단지 1px 높이가되어야합니다). 중앙 흰색 밴드가 980px 넓고 사이드 열은 최대 크기의 브라우저까지 수용하기 위해 수천 또는 그 이상의 픽셀로 확장됩니다.

Answer 4

OK, 여기 내 해결책이 있습니다. 이렇게하면 모든 사용자에게 "공동 또는 정원"3 열 고정 너비 레이아웃을 제공 한 다음 자바 스크립트가 활성화 된 사용자 (대다수의 사용자)에게 맞게 조정할 수 있습니다. 이 솔루션의 장점은 레이아웃이 절대 위치 지정 및 고정 높이와 같은 고급 CSS 조정을 사용하여 경험할 수있는 단점없이 일반 3 열 레이아웃처럼 작동한다는 것입니다. 당신은 HTML과 CSS에 무슨 일이 일어나고 있는지 볼 수 있어야 여기

바이올린 ... http://jsfiddle.net/vuary/

... 그것은 기본적인 것들입니다. JQuery와는 꽤 정직 :

:

문서가 준비 될 때 호출, 다시 뷰포트가 ... 단지의 경우 크기를 조정하면되는 기능에 jQuery를 변환

$(document).ready(function(){ 

    // find the width of the browser window.... 
    var docuWidth = $(window).width(); 

    // find the width of the central column as set by the CSS... 
    // (you could hard code this as 980px if desired) 
    var centerWidth = $('#center').width(); 

    // figure out how many pixels wide each side column should be... 
    sideColWidth = (docuWidth-centerWidth)/2; 

    // then set the width of the side columns... 
    $('#left,#right').css({ 
     width:sideColWidth+'px' 
    }); 
}) 

편집

http://jsfiddle.net/aKeqf/