CSS clear float

我有一個關於css clear float的問題。CSS clear float

我的問題是當我向所有頁面聲明div{float:left;}，然後在某些部分，我仍然想要一些div顯示屏幕的中心，如width:960px;margin:0 auto。如何清除這個div's浮動？

看到代碼：http://jsfiddle.net/37wnT/和審查http://jsfiddle.net/37wnT/show/

我需要div#nav和div#content屏幕的這兩個DIV中心，但其他分區仍然服從規則float:left;

2011-11-01 yuli chika

「它仍然遵守'float：left;'的規則意味着你對CSS的限制太多。正如你可能從中得到的那樣，設置一些像'div {float：left; }'。 – Wex

我已經修改了你的代碼點點。看一看。

<html> 
<head> 
<style> 
div.main{float:left;} 
#header{width:100%;height:100px;} 
#nav{clear:both;width:800px;margin:0 auto;} 
.nav{width:200px;text-align:center;font:16px/150%;} 
#wrap{width:100%;height:100%;} 
#content{clear:both !important;width:960px;height:100%;margin:0 auto;} 
.col{width:300px;height:300px;margin:0 10px 0 10px;background:red;display:block;} 
</style> 
</head> 

<body> 

<div id="header"> 
    <div id="nav"> 
     <div class="nav main">home</div> 
     <div class="nav main">info</div> 
     <div class="nav main">products</div> 
     <div class="nav main">cantact</div> 
    </div> 
</div> 
<div id="wrap"> 
    <div id="content"> 
     <div class="col main" >ds</div> 
     <div class="col main">ds</div> 
     <div class="col main">ds</div> 
    </div> 
</div> 
</body> 
</html>

來源

2011-11-01 18:49:31 pinaldesai

這是新jsfiddle

<div id="content"> 
    <div class="col">1</div> 
    <div class="col" >2</div> 
    <div class="col" style="clear:left;margin-top:10px">3</div><br> <-- changes here 
</div>

我不知道這是否是你想要的。

來源

2011-11-01 19:18:30

CSS clear float

回答

相關問題