我正在尝试做一个简单的 3 列模板
这是我的 CSS 代码:
#page {
padding: 0px;
height: 100%;
width: 900px;
margin-right: auto;
margin-left: auto;
float: none;
margin-top: 0px;
margin-bottom: 0px;
}
#header {
height: 250px;
width: 900px;
margin-right: auto;
margin-left: auto;
}
#right-column {
float: right;
width: 200px;
}
#left-column {
float: left;
width: 200px;
}
#center-column {
width: 490px;
margin-right: auto;
margin-left: auto;
}
然后是我的 HTML 代码:
<!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></head>
<body>
<div id="page">
<div id="header">
<img src="header.png" width="900" height="250" />
</div>
<div id="page-content">
<div id="left-column">Content for id "left-column" Goes Here</div>
<div id="center-column">Content for id "center-column" Goes Here</div>
<div id="right-column">Content for id "right-column" Goes Here</div>
</div>
</div>
</body>
</html>
我得到的是:
问题是:为什么我的右栏顶部有这个“边距”？左列和中列的制作方式与中右列相同，但右列有这个“边距”，我该如何解决？
最佳答案
所有列都应该像这样向左浮动:
#right-column {
float: left;
width: 200px;
}
#left-column {
float: left;
width: 200px;
}
#center-column {
width: 490px;
float:left;
}
查看此 fiddle .
关于html - 3 列 css 模板，右列的位置不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15419403/