유연한 중간에 3 열 그리드 만들기

Question

나는 문제를 해결했으며 그 해결책이 다른 사람들을 도울 것이라고 생각했습니다.

고정 된 왼쪽 및 오른쪽 열과 유연한 중심이있는 3 열 레이아웃이 필요했습니다. 열이 어떻게 바뀌더라도 열 사이의 공간을 채울 필요가있어서 수정할 수 없습니다. 그것은 이상하고 작동하는 것처럼 보이지 않지만 마술과 같습니다.

나는 여기 내 3 열 버전의 데모입니다 여기에 함께 http://jsfiddle.net/qx32C/36/

를 넣어 있었는지 수정 http://jsfiddle.net/chazthetic/qx32C/294/

HTML

<div class="container"> 
<div class="right">lkasjdfl;<br />kjasdf;<br />lkjas;<br />ldfkjdjf</div> 
<div class="lineContainer"> 
    <div class="left">lkasjdfl;<br />kjasdf;<br />ldfkja;<br />sldfjk;laksdjf</div> 
    <div class="middle">lkasjdfl;<br />kjasdf;<br />lkjas;</div> 
</div> 

CSS

.lineContainer { 
    overflow: hidden; /* clear the float */ 
    border: 1px solid #000 
} 
.lineContainer div { 
    height: auto; 
} 
.left { 
    width: 100px; 
    float: left; 
    border-right: 1px solid #000 
} 
.middle { 
    margin-left: 100px; 
    background: #ccc 
} 
.right { 
    width: 100px; 
    float: right; 
    border: 1px solid #000 
} 
​ 

,

Answer 1

왼쪽 가운데도 떠 있어야합니다. 이렇게하면 요소가 모두 브라우저의 크기에 종속 될 수 있습니다.

.left { 
    width: 100px; 
    float: left; 
    border-right: 1px solid #000 
} 
.middle { 
    float:left; 
    background: #ccc 
} 
.right { 
    width: 100px; 
    float: right; 
    border: 1px solid #000 
}