CSS相對+浮動

Question

我有3 divs排隊;中心div有許多position:absolute圖像（它們重疊 - 一個圖像一次可見;其餘的圖像爲display:none;，用於jQuery交叉淡入淡出，這與germane無關）。

我將中心div更改爲position:relative，以使其子圖像成爲position:absolute。 但是如果我將左側，中間和右側div設置爲float:left，則不會按順序顯示：left，center，right div（左側和右側聚集在左側）。

如果我在中心div上取出position: relative，它可以工作（但當然，圖像不能完全位於父div之內）。

如何定位這些div使我能夠將圖像完全定位在中心內部？我是否也必須爲左右分區設置相對值？

Answer 1

您可以使用以下CSS爲每列執行此操作。考慮到＃div-left和＃div-right必須出現在＃div-center之前的HTML 中，否則它們將不在同一頂部位置。

#div-left { 
    float: left; 
    width: 100px; 
} 

#div-center { 
    margin: 0 100px; 
    position: relative; 
} 

#div-right { 
    float: right; 
    width: 100px; 
} 

基本上左邊和右邊的div浮動到每一邊，具有固定的寬度。然後，中心div被分配一個左右邊距，它等於每邊懸浮的div的寬度。因爲，由於邊距，中心div適合浮游物，它看起來完全對齊。

位置：相對屬性不需要佈局（我剛剛添加它，因爲您需要在此div內放置其他對象）。

如果你需要完整的佈局有一個固定的寬度（比如說，你希望頁面佔用980px的寬度），只需創建一個具有這個寬度的div，並在其中包含三個div。

這裏你可以看到在行動的例子：http://jsfiddle.net/7pBVX/

Answer 2

@jasie可能是你給因此未寬度與center div所以給寬度中心DIV檢查這個http://jsfiddle.net/sandeep/ANvJe/