CSS相对浮点数

我有3个div排队中心div有许多位置：绝对图像(重叠 – 一个图像一次可见;其余的显示：无;对于jQuery交叉渐变,这不是一致的).

我将中心div改为位置：相对于使其子图像成为position：absolute.但是,如果我将左,中,右div设置为float：left,则不按顺序显示：left,center,right div(左和右组合在左侧).

如果我取消位置：相对于中心的div,它是有效的(但当然,这些图像不能绝对定位在父div中).

我如何定位这些div,以便我已经离开,中心,右边,而图像可以绝对定位在中心位置？我必须为左右的div设置相对位置吗？

解决方法

您可以使用以下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中定位其他对象).

如果您需要完整的布局来确定宽度(例如,您希望页面占用宽度为980px),只需创建一个带宽度的div,并在其中包含三个div.

你可以看到这里的例子：http://jsfiddle.net/7pBVX/

原文地址：https://www.jb51.cc/css/214311.html