CSS3

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

本文介绍了您要做的事情，我相信：http://www.alistapart.com/articles/holygrail/

Answer 2

我自己也遇到过类似的问题。这里的问题是“width：100％”基本上会继承父容器的宽度。

另一个问题是浮动。当你要求div＃b与div #a一起浮动到左边时，你不能使用花哨的边缘技巧来强制div＃b保持不受div＃a的影响。（换句话说，边距可用于防止div＃b进入并干扰其任何一侧的一定量空间。）但是，对于浮动，边距现在不会推动div＃b远离边缘页面，但远离div＃a。

的边缘

好的，所以解决方案看起来像这样。删除div #b上的浮动，然后应用左右边距，使div #b不会干扰任何一侧的列。让div＃b确定它自己的大小（即不给它一个“宽度”），所以它将适合两个浮点数。最后，移动div #b，以便在div＃b放置到位之前浮点数发生，这样div＃b就放在浮点数之间。

这是新代码：

<style type="text/css">
div
{
    border:1px solid red;
}
div#a
{
    float:left;
    width:50px;
}
div#b
{
    margin-left: 55px;
    margin-right: 55px;
}
div#c
{
    float:right;
    width:50px;
}
</style>

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

确定边距很棘手。边框不计入元素的宽度计算中，因此具有1px边框的50px宽的div实际上是52px宽。

Answer 3

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 <的新版本< / em>支持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>

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

特征检测

将feature detection与Modernizr一起使用。然后，您可以将CSS2用于缺乏CSS3 flexbox支持的浏览器。

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

Answer 4

我有一种感觉，你不会喜欢这个答案，但最简单的方法是从float: left删除div#b和任何宽度，然后切换你的div的顺序，所以侧边栏都在主要内容区域之前。这是代码：

HTML：

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

CSS：

div
{
    border:1px solid red;
}
div#a
{
    float:left;
    width:50px;
}
div#b
{
    overflow: hidden;
    /*margin: 0 60px;*/
}
div#c
{
    float:right;
    width:50px;
}

请注意，我已将overflow: hidden应用于中间div - 这将强制它进入列（在大多数浏览器中）。你可以使用给定的边距，如果你对“神奇”的解决方案感到不舒服（对它有一个合理的解释，但我永远记不住它了。）

将div的宽度调整为站点的宽度

4 个答案:

CSS3

CSS2

特征检测