我无法为使用 clear:both 的页脚添加上边距。 使用填充似乎可以解决问题。但它破坏了页脚的顶部实线边框。
index.php:
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Study at Best</title>
<link rel="stylesheet" rev="stylesheet" href="styles/layout.css" />
<link rel="stylesheet" rev="stylesheet" href="styles/ddm.css" />
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.corner.js"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>
</head>
<body>
<div id="container">
<div id="logo">
<img class="imageCenter" src="images/logo.png" alt="Best School"/>
</div>
<div id="navigation">
<?php include("navigation.html"); ?>
</div>
<div id="header">
</div>
<div id="left-column">
<h2>left-column</h2>
<p>
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
</p>
</div>
<div id="main-column">
<h2>main-column</h2>
<p>
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
</p>
</div>
<div id="right-column">
<h2>right-column</h2>
<p>
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
</p>
</div>
<?php include("footer.html"); ?>
</div>
</body>
</html>
footer.html:
<div id="footer">
<a href="#">Home |</a>
<a href="#">About Us |</a>
<a href="#">Contact Us |</a>
<a href="#">Menu Item 4 |</a>
<a href="#">Menu Item 5 |</a>
</div>
样式.css:
/*Default*/
* { margin: 0px; padding: 0px; }
body { font-size: 75%; font-family: Arial, Helvetica, sans-serif; }
ul { list-style: none }
a { outline: none; }
a img { border: none; }
h1 { font-size: 3.0em; }
h2 {
font-style: normal;
font-size: 1.0em;
padding: 5px 10px;
margin-bottom: 10px;
color: #FFF;
background-color: #A53030;
}
/*Tools*/
.textCenter { text-align: center; }
.imageCenter { margin-left: auto; margin-right: auto; display: block; }
.floatLeft: { float: left; }
.floatRight: { float: right; }
.clear { clear: both; }
/*Page*/
#container {
width: 800px;
margin: 0px auto;
}
#logo {
width: 170px;
height: 60px;
margin: 5px;
}
#header {
width: 800px;
height: 200px;
background-image: url('../images/best.jpg');
}
#navigation {
color: white;
width: 800px;
background-color: #000;
}
#left-column {
width: 150px;
padding: 10px;
float: left;
color: #FFF;
background-color: #A53030;
}
#main-column {
width:360px;
padding: 10px;
float: left;
}
#right-column {
width: 200px;
padding: 10px;
float: right;
}
#footer {
margin-top: 50px;
width: 800px;
border-color: #262626;
border-top-style: solid;
border-width: medium;
clear: both;
}
#footer ul li {
list-style: none;
float: left;
}
#footer ul li a {
display: block;
padding: 5px;
width: auto;
color: #000;
font-weight: bold;
text-align: center;
text-decoration: none
}
#footer ul li a:hover {
color: #49A3FF;
}
最佳答案
尝试改用填充。边距被 float 元素“吞没”。
关于css - 无法将上边距添加到使用清除 :both 的页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1055734/