css - 两个浮动 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;
} 

​</p>

Answer 2

您可以使用display: inline-block而不是float，然后使用 CSScalc来获得中间的正确宽度div：

HTML：

<div id="wrapper">
    <div id="one"></div><div id="two"></div><div id="three"></div>
</div>​

CSS：

#wrapper {
    min-width: 300px;
}
#one, #two, #three {
    display: inline-block;
    height: 300px;
}
#one {
    background: lightgreen;
    width: 100px;
}
#two {
    background: lightblue;
    width: 100%;
    width: calc(100% - 300px);
    width: -webkit-calc(100% - 300px);
    width: -moz-calc(100% - 300px);
}
#three {
    background: lightgreen;
    width: 200px;
}​

jsFiddle 演示

然后你可以把h2里面放在中间div，在这种情况下#two。

Answer 3

考虑以下 HTML：

<div id="parent">
    <div id="left">Left</div>
    <h2>Heading</h2>
    <div id="right">Right</div>
</div>

CSS 代码：

#parent {
    width: 80%;
    margin: auto;
    display: table;
}

#parent div, #parent h2 {
    display: table-cell;  
}

#left, #right {
    width: 50px;
}

演示：http: //jsfiddle.net/MAhmadZ/pMfLx/

Answer 4

试试这个我认为它可以解决你的问题

<style type="text/css">
div{
display: inline-block;
vertical-align: top;
height: 50px;
border: 1px solid red;
position: static;
}

#one{
float: left;
width: 100px;
}

#three{
float: right;
width: 100px;
}
</style>

<div id="outerDiv" style="width: 500px;height: 500px;border: 1px solid red;">

    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>

<script type="text/javascript">
var spaceLeft = document.getElementById("one").offsetWidth;

var spaceRight = document.getElementById("three").offsetWidth;

var totalSpace = document.getElementById("outerDiv").offsetWidth;

document.getElementById("two").style.width = totalSpace-(spaceLeft+spaceRight+4) + "px";
</script>