css - 将div的宽度调整为网站的宽度

Question

我需要中心 div div#b 来填充 div#a 和 div#c 之间的空白。

<div id="a">
    <span>Div1</span>
</div>
<div id="b">
    <span>Div2</span>
</div>
<div id="c">
    <span>Div3</span>
</div>

我试图通过将 width: 100% 放在 div#b 上来做到这一点，但没有成功。

div
{
    border:1px solid red;
}
div#a
{
    float:left;
    width:50px;
}
div#b
{
    float:left;
    width:100%; ?? <!-- Doesn't work!!! -->
}
div#c
{
    float:right;
    width:50px;
}

如何让 div#b 从 div#a 扩展到 div#c？

不能有换行符。

Answer 1

CSS3

您可以使用 CSS3 Flexible Box Layout Module 实现此动态行为:

<style type="text/css">
    div.Container
    {
        width: 100%;
        display: box;
        display: -moz-box;
        display: -ms-box;
        display: -webkit-box;
    }
    div.B
    {
        background: magenta;
        box-flex: 1;
        -moz-box-flex: 1;
        -ms-box-flex: 1;
        -webkit-box-flex: 1;
    }
</style>

<div class="Container">
    <div style="width: 50px; background: cyan;">
        A
    </div>
    <div class="B">
        B
    </div>
    <div style="width: 50px; background: yellow;">
        C
    </div>
</div>

新版 FireFox、新版 Google Chrome、Internet Explorer 10 和新版 Safari 支持 CSS3 灵活的框布局。 Internet Explorer 9 和 Opera 目前缺乏支持。

我还想提一下 FireFox 中的这种新方法:

<div style="float: left; width: 50px; background: cyan;">
    A
</div>
<div style="float: left; width: -moz-calc(100% - 100px); background: magenta;">
    B
</div>
<div style="float: left; width: 50px; background: yellow;">
    C
</div>

FireFox 是唯一支持 calc 的浏览器此刻的功能。

---

CSS2

这是老办法:

<div style="padding-left: 100px;">
    <div style="float: left; width: 50px; margin-left: -100px; background: cyan;">
        A
    </div>
    <div style="float: left; width: 100%; margin-left: -50px; background: magenta;">
        B
    </div>
    <div style="float: left; width: 50px; background: yellow;">
        C
    </div>
</div>

容器 div 内的 100% 宽度是容器的宽度减去 100px 左填充。然后是左右 50px div 元素的空间。然后你必须使用一些负边距和 float 来定位它们。

---

特征检测

使用feature detection与 Modernizr .然后，您可以在不支持 CSS3 flexbox 的浏览器上使用 CSS2。

如果您进行 .NET 开发，您可以使用 NuGet 下载 Modernizr .