为什么这个 div margin-top 没有按预期工作？
我使用的是火狐8.0.1margin-top 未按预期工作，有人可以帮忙吗？谢谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>New Border</title>
<style type="text/css">
#page {
width:980px;
margin: 50px auto;
}
#board {
width:600px;
height:400px;
background-color: gray;
}
.cell {
border: 1px solid;
width:50px;
height:20px;
margin: 30px 5px;
}
</style>
</head>
<body>
<div id="page">
<div id="board">
<div class="cell">
</div>
</div>
</div>
</body>
</html>
因此，cell div 中的 margin-top 未按预期工作。
我认为应该是 margin-left，将 cell div 放在 board div 下，但事实并非如此。
这是截图： 
I'm using Firefox 8.0.1
margin-top is not working as expected, can anyone help? thx.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>New Border</title>
<style type="text/css">
#page {
width:980px;
margin: 50px auto;
}
#board {
width:600px;
height:400px;
background-color: gray;
}
.cell {
border: 1px solid;
width:50px;
height:20px;
margin: 30px 5px;
}
</style>
</head>
<body>
<div id="page">
<div id="board">
<div class="cell">
</div>
</div>
</div>
</body>
</html>
So, margin-top in the cell div is not working as expected.
I thought it should be margin-left, to place the cell div under the board div, but it's not.
This is the screenshot:
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您可以添加
或
到
#boardcss。请参阅http://jsfiddle.net/3QfWS/
You can add
or
To
#boardcss.See http://jsfiddle.net/3QfWS/
我将“clearfix”类添加到父元素中，这为我解决了问题。
I added the "clearfix" class to the parent element which solved the problem for me.
您已将单元格嵌套在板 div 中。如果你想要的话就把它放在外面。
You've nested cell in board div. Put it outside if you want it below.