Fatal编程技术网
  • css/
  • 浮动CSS开始看起来像一个谜

浮动CSS开始看起来像一个谜

css

浮动CSS开始看起来像一个谜,css,xhtml,Css,Xhtml,我正在为学校写一个基本的网站，所有的东西都飘得到处都是。这很令人沮丧，我很累。不，今晚不到期。不过，我想得到一些提示，让我上路。我应该删除我的CSS代码并重新开始，确保我仔细检查了所有内容，还是我的边距都错了 屏幕截图 XHTML <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xh

我正在为学校写一个基本的网站，所有的东西都飘得到处都是。这很令人沮丧，我很累。不，今晚不到期。不过，我想得到一些提示，让我上路。我应该删除我的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:&#116;&#109;&#107;&#114;&#97;&#117;&#115;&#53;&#64;&#99;&#99;&#46;&#117;&#109;&#66;&#666;&#666;&#666;&#666;&#666;&#666;&#46;&#666;&#66;'>&#69;&#109;&#97;&#105;&#108</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>
你要做的是给你的页脚（你把最后修改日期的javascript放在这里）一个样式“clear:both；”。这种样式可以防止元素与浮动元素内联混合，将其移动到它们正下方的位置。这将解决大多数布局问题

我还注意到您的代码中有几点值得一提：

  • 在html中，属性中不能有空格，即：
    class=“foo”
    ，而不是
    class=“foo”
  • 在css中，
    float:justify
    和
    float:center
    是无效的属性。不是右就是左
#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; 

}