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