CSS relative + float

Question

我排队了3 divs;中心div有许多position:absolute张图片（重叠 - 一次只能显示一张图片;其余的是display:none;，用于jQuery交叉淡入淡出，这与其密切相关。

我将中心div更改为position:relative，以使其子图像为position:absolute。 但如果我将左侧，中间和右侧div设置为float:left，则不会按顺序显示：左侧，中间，右侧div（左侧和右侧）蜷缩在左边。）

如果我在中心div上取出position: relative，它就可以了（但是当然，图像不能绝对位于父div内）。

如何定位这些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/