如何用css实现这个特定的布局？

enter image description here

到目前为止，这里是HTML我有：

<body> 
<div id="content"> 
<div id="header"> 
</div> 
<div id="nav"> 
</div> 
<div id="footer"> 
</div> 
</div> 
</body>

和CSS：

#content{ 
margin:0 auto; 
height:1200px; 
width:1000px; 
border:2px solid black; 
} 
#header{ 
margin:0 auto; 
width:inherit; 
height:200px; 
border-bottom:2px black solid; 
} 
#nav{ 
margin:0 auto; 
width:inherit; 
height:50px; 
border-bottom:2px solid black; 
} 
#footer{ 
width:inherit; 
border-top:2px solid black; 
margin-top:-1200px; 
height:200px; 
clear:both; 
}

的问题是与页脚 - 它不像图中那样。

你能告诉我我的代码有什么问题吗？请不要给我一些其他代码，因为我是CSS新手。

来源

2013-09-25 Karn Singh

为什么您的页脚上有'margin-top：-1200px'？而且，即使这样既不能修复也不能破坏任何东西，为什么你在页脚上都清楚地说明了这两点？ “明确：两者都应该这样做？ – Adam

您的页脚向上移动，因为您有保证金顶部：-1200px

来源

2013-09-25 18:25:09 Dale

如何用css实现这个特定的布局？

回答

相关问题