我正在为学校编写一个基本站点，所有对象都漂浮在各处。这令人沮丧，我很累。不，不是今晚到期。但是，我想在我的路上发送一些指示。我应该删除我的 CSS 代码并重新开始确保我仔细检查所有内容，还是我的边距都错了？
截图
XHTML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="sitestyle.css"/>
</head>
<body id="home">
<div id="site">
<ul id ="nav_bar">
<li><a href="index.html">Home</a></li>
<li><a href="nutrition.html">Nutrition</a></li>
<li><a href="grooming.html">Grooming</a></li>
<li><a href="about.html">About</li>
</ul>
<div id="header">
<h1> Cat Site!</h1>
<h2>By: XXX XXX</h2>
</div>
<address class="info">
<a href='mailto:tmkraus5@cc.umBʚʚʚʚʚʚ.ʚB'>Email</a></br>
Developed with: Firefox 16.0.2.
</address>
</div>
<!-- End of info and header objects-->
<div id="col1">
<img src="kitty.png" </>
Source: Shitty_Watercolour <a href="http://www.reddit.com/r/funny/comments/12zcnm/excuse_my_derp_face_but_i_think_i_just_accidently/c6zh53e"</a>
</div>
<!--End of Col1-->
<div id="col2">
<h2>Welcome!</h2>
<h3 class ="subheading">What is this Cat site about?</h3>
<p class = "sitetext"> Everyone loves cats. Yes, even you! This website should help you educate yourself about our feline friends briefly.
That is to say, you won't waste a lot of unnecessary time here.</p>
<!--End of col2 div-->
</div>
<div style="text-align:center;color:black">
<script type="text/javascript">
document.write("Last update: " + document.lastModified);
</script>
</div>
<!--End of site-->
</div>
</body>
</html>
CSS
#header {
color: black;
float: center;
}
ul#nav_bar {
list-style-type: none;
margin: 0;
margin-left:0px;
font-size: 125%;
color: pink;
width: 25%;
float: justified;
}
#nav_bar li {
float: left;
}
#nav_bar a {
display: block; background: pink;
color: white;
padding: 4px 6px;
border: 1px solid;
text-decoration: none;
}
div#col2 {
width: 50%;
float: right;
padding-left: 2.5%;
padding-right: 2.5%;
background: grey;
}
#col1 {
float: left;
clear: left;
font-size: 75%;
text-align: center;
margin: 1em 0 1.5em 1.5em;
display: block;
}
最佳答案
你想要做的是给你的页脚(你放置最后修改日期的 javascript 的地方)样式“clear: both;”。这种样式可以防止元素与 float 元素混合内联，将其移动到它们正下方的位置。这应该可以解决大部分布局问题。
我还注意到您的代码中有一些值得一提的事情:
- 在 html 中，属性中不能有空格，即:
class="foo"，而不是class = "foo" - 在 css 中，
float: justify和float:center不是有效属性。不是左就是右。
关于css - float CSS 开始看起来像一个谜题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13391889/