CSS相对定位 + 浮动

Question

CSS相对定位 + 浮动

css

10

enter image description here

我有三个

元素，它们依次排列；中间的

元素里面有很多position:absolute的图片（这些图片是重叠的，一次只显示一张；其余的都设置为display:none;，用于jQuery淡入淡出效果，这不是本题讨论的重点）。

我将中心

元素的属性改为position:relative，以便它的子图片可以被设置为position:absolute。但是，如果我将左、中、右三个

元素都设置为float:left，它们就不会按顺序显示：左边和右边的

元素会挤在一起，紧贴左边界。

如果我去掉中间

元素上的position:relative属性，它们就正常了（当然，这时候图片就不能相对于父级

元素绝对定位了）。

我该如何设置这些

元素，才能让它们按照左、中、右的顺序排列，并且中间的图片仍可被绝对定位？我需要在左右两个

元素上也设置relative属性吗？

- atp

2个回答

1

@jasie，你可能没有给中心

设置宽度，因此请为中心

设置宽度，并检查此链接http://jsfiddle.net/sandeep/ANvJe/。

- sandeep

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- salgiza · Accepted Answer

您可以为每个列使用以下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 是浮动到两侧的，具有固定宽度。然后给中间的 div 分别赋予左右边距，使其等于浮动在两侧的 div 的宽度之和。由于中心 div 通过边距适应了两侧浮动块之间的距离，因此它看起来恰好居中对齐。 position:relative 属性并不需要用于布局（我只是添加了它，因为您需要在此 div 中定位其他对象）。

如果您需要整个布局具有固定宽度（比如说，您希望页面占据980像素的宽度），只需创建一个具有该宽度的 div 并将这三个 div 放置其中即可。

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