2012-03-01 4 views
1

전체 창을 채우는 세 개의 열이있는 레이아웃을 만들려고합니다. 중간 열은 페이지의 가운데에 있어야하며 고정 너비 (픽셀이 아니라 백분율) 여야합니다. 왼쪽과 오른쪽 div는 너비가 동일해야하지만 너비는 나머지 창 너비에 따라 다릅니다.고정 폭 센터 3 열 레이아웃을 만드는 방법은 무엇입니까?

<div id="wrapper"> 
    <div id="left"> 
     left content 
    </div> 
    <div id="middle"> 
     middle content 
    </div> 
    <div id="right"> 
     right content 
    </div> 
</div> 

단지 CSS (NO 자바 스크립트)와 레이아웃을 할 수있는 방법이 있나요 : 여기

는 HTML을 무엇입니까? 그렇지 않으면 테이블로 할 수 있습니까?

여기는 3 개의 열 레이아웃으로 지금까지 찾은 몇 가지 링크가 있습니다. 나는 필요한 제약 조건을 제시하지 못한다. 당신의 도움에 미리

http://www.dynamicdrive.com/style/layouts/category/C10/
http://matthewjamestaylor.com/blog/perfect-3-column.htm

감사합니다.

편집 : (픽셀 값)

middle.width = 500 
left.width = right.width = (window.width <= 500) ? 0 : (window.width - 500)/2; 

편집 :

window.onresize = function() { 
    var width = ((window.innerWidth - 500)/2) + "px"; 
    document.getElementById("right").style.width = width; 
    document.getElementById("left").style.width = width; 
}​ 
+0

이 – Zoidberg

답변

0

당신이 시도 할 수 있습니다 : 여기
는 자바 스크립트 솔루션입니다
가 구체적으로 내가 잡고 다음을 싶습니다 너비 = 100 % 및 세 개의 열이있는 테이블을 사용하여 가운데 열의 정적 너비를 설정합니다. 각 열에 DIV 또는 P와 같은 블록 요소를 삽입

<table width="100%"> 
    <tr> 
    //left col 
     <td> 
     </td> 

    //main col 
    <td style="width:500px;"> 
    </td> 

    //right col 
    <td> 
    </td> 

    </tr> 
</table> 

시도, 빈 열이

+0

이 아, 좋은 작품 http://960.gs/에서 봐 이상한 :)를 작동 할 수 있습니다 : HTTP : //jsfiddle.net/wRL3j/26/ 왼쪽과 오른쪽 데이터 요소에 공백을 넣지 않도록합니다. 슬프게도 중간 요소에 최소 너비가 없어 화면이 축소 될 때 아티팩트가 있기 때문에이 방법을 사용할 수 없습니다. – nikdeapen

+0

편집 : 최소 너비가있을 수 있지만 왼쪽 td 요소가 완전히 접히지는 않습니다. – nikdeapen

+0

너는 #left와 #right에 최소 너비를 추가하려고 했습니까? 처럼 http://jsfiddle.net/wRL3j/37/ – Liviu

관련 문제