以浮動屬性爲中心的div

這可能看起來像通常如何居中浮動問題，但我需要居中浮動div的原因是因爲其他div容器也具有浮動屬性。我已經設置了一個高度自動來確定高度取決於包裝div內的對象，在包裝div有2個浮動div使它並排。但是，如果我沒有指定捲紙上出現浮動包裝DIV只會顯示1條staight線（不換任何東西）以浮動屬性爲中心的div

div.wrapper{ 
width: 1000px; 
height: auto; 
margin-top: 30px; 
float: left; 
border:1px solid gray; 
} 

div.leftcontainer{ 
width: 200px; 
height: auto; 
margin-top: 10px; 
margin-left: 10px; 
border:1px solid gray; 
float: left; 
} 

div.right container{ 
width: 750px; 
height: auto; 
margin-top: 10px; 
margin-left: 15px; 
margin-right: 15px; 
border:1px solid gray; 
float: right; 
}

，這是我的html代碼

<div class ="wrapper"> 
<div class ="leftcontainer"> 
    some options 
</div> 
<div class = "rightcontainer"> 
    some options 
</div> 
<div class = "rightcontainer"> 
    some options 
</div> 

</div>

讓我怎麼做我的包裝div中心沒有刪除浮動或其他方式來做到這一點？謝謝

來源

2012-01-16 3cross

你是什麼意思：center a float div ?,如果你想中心一個div，刪除浮動並放置保證金：0 auto – amd 2012-01-16 07:42:53

隨着.wrapper的所有內容浮動，您需要清除它們。

在關閉.wrapper div之前，刪除.wrapper上的浮動並添加<div style="clear:both;"></div>。

您應該然後能夠補充：

div.wrapper { 
    /* ... */ 
    position:relative; 
    margin:0 auto; 
}

而且您的包裝將居中。

來源

2012-01-16 07:44:17 lukiffer

嗯是的，它確實會居中。但是，但是，如果我有浮動div內的包裝，包裝不會環繞他們，而是表現爲包裝什麼都沒有。 – 3cross 2012-01-16 12:47:37

只要內部div是'position：relative;'而且你有一個div來清除兩個內容（'

'），它將包含它的所有內容。 – lukiffer 2012-01-16 15:58:43

以浮動屬性爲中心的div

回答

相關問題