如何使一個div浮動左/右在一個居中的div內

當我想浮動一個子div到居中父div的左側或右側時，整個設計向左或向右依賴於浮動。所以，如何浮動一個子div，並使居中的父div在中心。

如何使一個div浮動左/右在一個居中的div內

HTML：

<div id="parent"> 
<div id="child-left"></div> 
<div id="child-right"></div> 
</div>

CSS：

#parent{ 
    padding: 0 auto; 
    width: 600px; 
} 
#child-left{ 
    float: left; 
    width: 300px; 
} 
#child-right{ 
    float: right; 
    width: 300px; 
}

爲什麼父DIV去左/右，並且不留在中心？而如何讓它留在中心？

來源

2012-10-10 phpsherpa

你是如何定心'＃DIV parent'？沒有任何東西會使'＃parent'居於中心位置，無論是否使用浮動物體 –

我已經爲'margin-right'和'margin-left：auto'放置了 – phpsherpa

'＃parent'？在這種情況下，你的代碼應該工作（[見這裏]（http://jsfiddle.net/PvYbp/））。也許你可以敲我們一個例子[JsFiddle]（http://jsfiddle.net） - 或隨意[編輯我的]（http://jsfiddle.net/PvYbp/） - 重現問題 –

這個代碼見demo

#parent{ 
    padding: 0px, auto; 
    width: 605px; 
    height:200px; 
    border:solid 1px #f00; 
} 
#child-left{ 
    float: left; 
    width: 300px; 
    height:200px; 
    border:solid 1px #0F0; 
} 
#child-right{ 
    float: right; 
    width: 300px; 
    height:200px; 
    border:solid 1px #00F; 
}

來源

2012-10-10 13:47:03 Champ

我很困惑......這不會使'＃parent'元素居中，並且在答案中鏈接的示例顯示。爲什麼這是被接受的答案？如果這解決了你的問題，那麼我認爲你需要改變你的問題，以避免混淆未來的訪問者 –

要居中父元素，使用margin: 0 auto;

#parent{ 
    margin: 0 auto; 
    width: 600px; 
}

也有很多拼寫錯誤在你的代碼（智利沒有孩子），和失蹤>符號，修復問題，然後繼續

A working JSFiddle (Click me)前

來源

2012-10-10 13:44:57 Andy

ty，我更正了代碼 – phpsherpa

對於父DIV你使用這個CSS代碼

margin:0 auto; 
width:980px;

和兒童u使用浮法

float:right or left; 
width:anypx;

問候

來源

2012-10-10 13:44:59

我也這麼做，但在某些情況下，父div浮動到左/右，但它應該保持居中 – phpsherpa

您使用此樣式爲父float：none; –

謝謝，忘記了那個 – phpsherpa

如何使一個div浮動左/右在一個居中的div內

回答

相關問題