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/