0

代码说明：

我正在创建一个包含三个链接的栏。我制作了条形图，并尝试使用 、 和float分隔text-align链接width。（我试图让中心链接居中，其他两个与它等距，与侧面等距。）但是，当我最初使用 3 divs（divs除了 "I" divs）做它时，背景颜色消失了。所以我弄乱了它并意识到第三个链接上的浮动div导致了问题。所以我添加了另一个div（最后一个div），它与一个小文本一起工作。但是，由于我必须在其中输入文本，所以它会影响我的间距。所以我div在另一边（第一个）做了一个来平衡它。但是，它仍然会在没有浮动的情况下摆脱我的间距！

问题）：

为什么将float属性放在最后div一行会导致背景颜色消失？

<div style="padding:0px;margin:0px;background-color:#3C3C3C;">
    <div style="color:#3C3C3C;float:left;">
        I
    </div>
    <div style="margin-left:50px;width:20%;float:left;text-align:center;">
        <a style="color:#3690B7;" href="">
            Hello
        </a>
    </div>
    <div style="width:50%;float:left;text-align:center;">
        <a style="color:#3690B7;" href="">
            Hello
        </a>
    </div>
    <div style="margin-right:50px;width:20%;float:left;text-align:center;">
        <a style="color:#3690B7;" href="">
            Hello
        </a>
    </div>
    <div style="color:#3C3C3C;float:right;">
        I
    </div>
</div>
4

3 回答 3

2

您必须通过在最终 div 下方添加另一个 div 来清除浮动：

<div style="clear:both;"></div>
于 2013-08-21T09:40:15.913 回答
0

添加overflow: auto到您的外部<div>：

<div style="padding:0px; margin:0px; background-color:#3C3C3C; overflow: auto;">
于 2013-08-21T09:40:22.583 回答
0

问题在于，因为您是在另一个未浮动的元素中浮动元素，所以导致包装元素呈现为好像它是空的。

float:left;要解决此问题，您可以在包装上添加一些宽度和 adiv

查看这个jsbin示例，这似乎是您正在寻找的。

基本上你的第一个div应该是这样的；

<div style="padding:0px; margin:0px; background-color:#3C3C3C;float: left; width: 100%;">

然后您只需要更改宽度，并删除任何边距或填充。

ps你真的应该考虑放弃内联样式并使用带有 Id 和类名的外部样式表。

于 2013-08-21T09:44:01.983 回答