Question

有人可以解释如何更改my example以便它具有：

与容器一样宽的3列
右侧，左侧列与其中的内容一样宽（即它们不应包裹其内联子元素）
中心列占据剩余宽度，包裹它的＆＃39;必要的内容
所有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;
}

3列布局，边栏列与其内容一样宽？

1 个答案: