3列布局的邊緣列與內容一樣寬？

Question

可能有人請解釋如何改變my example使之具有：

• 3列在一起一樣寬的容器
• 右側，左側的列寬爲其中的內容（即它們不換他們行內的孩子元素）
• 中心列佔用剩餘寬度，根據需要包裝其內容
• 所有3列保持相同的高度（即如果中間列由於其內容的包裝而增長高度，則該內容不應該溢出到右邊或左邊的列）
  • 容器仍然可以作爲寬的父元素

小提琴：http://jsfiddle.net/QG98e/ - 使用花車，但中間一欄的內容果然溢出，圍繞左/右列流動的嘗試：

從上面的小提琴標記

HTML：

<p>other content above</p> 

<div id="container"> 
    <div id="left"> 
    <button>foo</button> 
    <button>bar</button> 
    </div> 

    <div id="center"> 

    blah blah blah blah blah blah blah blah 
    blah blah blah blah blah blah blah blah 
    blah blah blah blah blah blah blah blah 
    blah blah blah blah blah blah blah blah 
    blah blah blah blah blah blah blah blah 
    blah blah blah blah blah blah blah blah 
    blah blah blah blah blah blah blah blah 

    </div> 

    <div id="right"> 
    <a href="#">curly</a>, <a href="#">moe</a> 
    </div> 
</div> 

<p>other content below</p> 

CSS：

#container { 
    border: 1px solid #808080; 
    clear: both; 
} 

#left { 
    float: left; 
} 

#right{ 
    float: right; 
} 

Answer 1

#container { 
    position: relative; 
    border: 1px solid #808080; 
    height: 100px;/*define you*/ 
    width: 100%; 
    } 
#left { 
    position: absolute; 
    width: 20%; 
    height: inherit; 
    left: 0; 
} 
#center{ 
    position: absolute; 
    width: 56%; 
    height: inherit; 
    left: 20%; 
} 
#right{ 
    position: absolute; 
    width: 20%; 
    height: inherit; 
    right: 0; 
}