浮動CSS開始看起來像一個謎題

我正在爲學校寫一個基本的網站，所有的對象都漂浮在這個地方。這令人沮喪，我很累。不是今晚沒有到期。不過，我想請幾位指導員帶我前往。我應該刪除我的CSS代碼並重新開始，確保我仔細檢查了所有內容，還是我的邊際全部錯誤？浮動CSS開始看起來像一個謎題

截圖

http://i.imgur.com/37zsQ.png

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>

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; 

}

來源

2012-11-15 David K

你想要做的是給你的頁腳（你把JavaScript放在最後修改日期的地方）樣式「clear：both;」。這種樣式可以防止元素與浮動元素內嵌混合，將元素移動到它們正下方的位置。這應該解決大部分佈局問題。

我也注意到在你的代碼的幾件事情，那熊提的是：

，也不能在屬性空間，即：class="foo"，在CSS不class = "foo"
，float: justify和float:center不是有效的屬性。無論是正確的還是左邊的。

來源

2012-12-09 10:52:40

浮動CSS開始看起來像一個謎題

回答

相關問題