Question

您好我正在创建简单的布局但是当我想要设置页脚样式时它不会在输出中显示，？可能是什么问题呢？看我在页脚上应用了样式，它的背景颜色没有显示。图片在这里：http://oi40.tinypic.com/xe03rs.jpg

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #container {
        width: 950px;
        height: auto;
        margin:auto;
    }
    #header {
        width: 950px;
        height:120px;
    background-color:#F00;
}
#main {
    width: 750px;
    height: 500px;
    background-color:#0F0;
    float:left;
}
#sidebar {
    width:200px;
    height:500px;
    background-color:#00F;
    float:left;
}
#footer {
    width: 950px;
    height: 500px;
    background-color:#F00;
    }
</style>
</head>

<body>
<div id="container">
    <div id="header">
    HEADER GOES HERE
    </div>

    <div id="main">
    MAIN CONTENT GOES HERE
    </div>

    <div id="sidebar">
    SIDEBAR GOES HERE
    </div>
    <div id="footer">
    FOOTER GOES HERE
    </div>
</div>

</body>
</html>

Answer 1

样式正在运行，但您的页脚被其他元素隐藏，请尝试：

#footer {
width: 950px;
height: 500px;
background-color:#F00;
float: left;
}

这里是小提琴：http://jsfiddle.net/6tMFm/40/

Answer 2

您有divs main和sidebar两个floating使用float:left;

因此，为了使footer可见，您需要为页脚添加clear:both属性，因为div是块级元素，并且当您添加{{1}时它们将表现得像普通float，

inline DOM

现在看到变化。它必须工作。

Answer 3

为#container

设置

overflow: auto;

和#footer

margin: auto;

为我的网站创建布局但我无法编辑div标签？

3 个答案: