CSS 相对 + float

Question

我排列了 3 个 div；中心 div 有许多 position:absolute 图像(它们重叠——一次显示一个图像；其余的是 display:none;对于 jQuery 交叉淡入淡出，这不是密切相关的)。

我将中心 div 更改为 position:relative 以使其子图像成为 position:absolute。 但是如果我把左中右div设置为float:left，它不会按照left,center的顺序显示, right div(左边和右边在左边聚成一团)。

如果我取出中心 div 上的 position: relative，它就可以工作(当然，图像不能绝对定位在父级 div 中)。

如何定位这些 div 以便我有左、中、右，同时图像可以绝对定位在中心内？我是否也必须为左右 div 设置相对值？

Answer 1

您可以为每一列使用以下 CSS。请注意，#div-left 和 #div-right 都必须出现在 HTML 之前 #div-center，否则它们将不会位于相同的顶部位置。

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

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

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

基本上，左右 div float 到每一侧，宽度固定。然后为中心 div 分配一个左右边距，该边距等于 float 在每一侧的 div 的宽度。因为，多亏了边距，中心 div 适合 float 之间，它看起来在它们之间完美对齐。

布局不需要 position:relative 属性(我只是添加它，因为您需要将其他对象定位在此 div 中)。

如果您需要整个布局具有固定宽度(例如，您希望页面占据 980px 的宽度)，只需创建一个具有此宽度的 div，并将三个 div 包含在其中。

您可以在此处查看实际示例:http://jsfiddle.net/7pBVX/