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; 
}