너비가 100 %이고 변수 가운데에 div가있는 3 열 레이아웃

Question

한 개의 가운데 div, 한 개의 왼쪽 div 및 하나의 오른쪽 div로 3 열 레이아웃을 만들려고합니다. 왼쪽 및 오른쪽 div는 가운데 div에서 페이지의 왼쪽 및 오른쪽 끝까지 확장되어야합니다. 중심 div에는 투명 영역이있는 요소가 포함되어 있으므로 가운데 div는 왼쪽 div와 오른쪽 div에 겹쳐서는 안됩니다. 중심 div의 너비가 고정되어 있으면 솔루션을 만들 수있었습니다. 질문은 비슷한 레이아웃을 만들 수 있습니까? 동적 폭을 가진 중심 div가 있습니까? 여기

jsFiddle Link

고정 폭의 코드이다.

CSS :

#divCenter{ 
    position:absolute; 
    top:0%; 
    left:0; 
    right:0; 
    height:50px; 
    width:500px; 
    margin:0 auto; 
    border: 1px solid #aaaaff; 
    background:#aaaaff; 
    z-index:2; 
} 
#divLeft{ 
    position:absolute; 
    top:0; 
    left:0%; 
    width:50%; 
    border: 1px solid #aaffaa; 
    z-index:1; 
} 
#divLeftInner{ 
    height:60px; 
    margin-right:250px; 
    background:#aaffaa; 
} 
#divRight{ 
    position:absolute; 
    top:0; 
    right:0%; 
    width:50%; 
    border: 1px solid #ffaaaa; 
    z-index:1; 
} 
#divRightInner{ 
    height:60px; 
    margin-left:250px; 
    background:#ffaaaa; 
} 

HTML :

<div id="divCenter"> 
</div> 
<div id="divLeft"> 
    <div id="divLeftInner"> 
    </div> 
</div> 
<div id="divRight"> 
    <div id="divRightInner"> 
    </div> 
</div> 

Answer 1

플로트 모든 열이 왼쪽과 동일한 폭이 왼쪽과 오른쪽 열을 설정 - 자바 스크립트를 사용합니다.

HTML

<div id="wrapper"> 
    <div id="left" class="col"></div> 
    <div id="mid" class="col"></div> 
    <div id="right" class="col"></div> 
</div>​ 

CSS

.col {float:left;height:200px;} 
#left, #right {width:30%;background:red;} 
#mid {width:40%;background:blue;} 

jQuery를

//extra verbose for clarity's sake 
var setWidths = function() { 
    var wrapWidth = $("#wrapper").width(); 
    var midWidth = $("#mid").width(); 
    var leftOverWidth = wrapWidth - midWidth; 
    var sideColWidth = leftOverWidth/2; 
    $(".sidecol").width(sideColWidth); 
} 

//set new sizes whenever the window is resized 
$(window).on("resize", setWidths); 

$(function() { 
    setWidths(); //set correct sizes when the DOM has loaded 
});​ 

http://jsfiddle.net/GYGL3/37/