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

回答

相关问题