两个浮动的div,中间有灵活的div

Question

我在固定宽度的标题中需要以下内容:

1. 不同宽度的div向左浮动.
2. 不同宽度的div向右浮动.
3. 它们之间居中的h2占据了剩余的空间.

浮动的div包含可能大小不同的内容.

我尝试了各种方法,但都失败了.我知道一个解决方案是绝对定位外部div,然后将h2伸展到整个宽度并使文本居中,使其位于中央,但必须有一个更好的方法来做到这一点.

Answer 1

一个带有最小标记的基本jsFiddle示例.

HTML

<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
    <h2>H2</h2>
</div>?

CSS

#container {
    border:1px solid #999;
}
#left {
    float:left;
}
#right {
    float:right;
}
h2 {
    text-align:center;
    margin:0;
} 

​