양측에 두 개의 유동 열과 폭 : 중간 열에 대해 자동입니다.

Question

가운데에 로고가 정렬되고 측면에 메뉴 옵션이있는 CSS/HTML 탐색 메뉴를 만들어야합니다.

http://jsfiddle.net/d32an55L/

<div id="wrapper"> 
    <div id="left">aaaa</div> 
    <div id="center"> Center content</div> 
    <div id="right">aaaa</div> 
</div> 

#wrapper{ 
    display:table; 
    width:100%; 
    height:100%; 
} 
#wrapper > div{ 
    display:table-cell; 
    height:100%; 
} 
#left { 
    background-color:pink; 
    text-align:right; 
} 
#center { 
    background-color:green; 
    width:100px; 
} 
#right { 
    background-color:red; 
} 
body, html{ 
    width:100%; 
    height:100%; 
} 

것은 내가 열, 폭과 같은 내부의 내용에 맞게 중간 열의 너비를 만드는 방법을 알고하지 않는 것이 : 나는 이런 식으로 일을 생각 : 자동;

할 수 있는지 알고 계십니까? 이것을 달성하는 더 좋은 방법이 있습니까?

감사합니다.

편집 : 필자가 필요로하는 것은 가운데 열을 포함하는 내용으로 가로 열을 유동적으로 유지하는 것입니다.

Answer 1

당신이 의도를 분명히하는 것에 유의하면서, 이것을 할 수있는 방법은 2 가지 밖에 없습니다. 역 호환성을 유지해야하는 경우 JavaScript를 사용해야합니다. 현대적인 브라우저에만 관심이 있다면 CSS3에는 flex이라는 display 모드가 있습니다. 사용하기가 매우 쉽습니다. 여기를 구현하기 위해 수정 된 CSS는 다음과 같습니다

#wrapper { 
    display:-webkit-box; 
    display:-moz-box; 
    display:-ms-flexbox; 
    display:-webkit-flex; 
    display:flex; 
    width:100%; 
    height:100%; 
} 

#wrapper > div { 
    height:100%; 
} 

#left { 
    background-color:pink; 
    text-align:right; 
    flex:1 0 auto; 
} 

#center { 
    background-color:green; 
    flex:0 1 auto; 
} 

#right { 
    background-color:red; 
    flex:1 0 auto; 
} 

body, html { 
    width:100%; 
    height:100%; 
} 

JSFiddle : 당신은 오래된 브라우저에 대한 호환성이 필요한 경우 http://jsfiddle.net/cwj7132y/

, 내가 뭔가를 그릴 수 있습니다.