为什么我的右边div不与其他人一起浮动?

时间:2011-09-20 13:27:14

标签: html css

我的页面上有3个div用于构建一个画廊页面,我需要将'center'居中,使得它的中央位于任意一个屏幕上,div左右浮动,右边一个。左侧和中间div似乎工作正常,并且彼此内联,但我的右浮动div位于低于其他2的位置。

为什么会这样?

HTML

<div id="left">
IM ON THE LEFT  
</div>


<div id="middle">
I AM IN THE MIDDLE
</div>

<div id="right">
THIS IS ON THE RIGHT
</div>

CSS

#left{
float:left;
position:relative;
width: 150px;

}

#middle{
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
position: relative;

}


#right{
float:right;
width: 150px;
position: relative;
}

6 个答案:

答案 0 :(得分:2)

这是因为#middle是一个块级元素并且不浮动。这将创建一个新行,您的浮动右侧将从下一行开始。如果您将中间块浮动到左侧,只要有足够的空间,它应该可以正常工作。或者,您可以将#right - div放在HTML的顶部。这样它会向右浮动,然后#left将向左浮动,#middle将保留在正常的文档流中,即如果有空间则位于中间。

答案 1 :(得分:1)

在CSS .left添加

display:inline-block;

.right

相同

编辑:

这里有一个有效的jsFiddle:http://jsfiddle.net/LwUqF/

答案 2 :(得分:1)

也许没有空间让最后一个div浮动到它应该浮动的位置。

也许您可以对html进行重新排序,因此右列位于中间列之前。

也许你可以这样做:

#left {
    float: left;
    width: 10%;
}
#center {
    float: left;
    width: 80%;
}
#right {
    float: left;
    width: 10%;
}

答案 3 :(得分:0)

这是可能的更正

#left{
float:left;
position:relative;
width: 150px;
display: inline-block;
}

#middle{
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
position: relative;

}


#right{
float:right;
width: 150px;
position: relative;
display: inline-block;
}

试着看看它是否适合你...

答案 4 :(得分:0)

这是因为您已将#middle指定为display:block这意味着此div将填充容器的其余部分,因此将#right div推到其下方。将#middle更改为display:inline-block,即可获得所需的结果。

请参阅http://jsfiddle.net/xm33e/

编辑:或PatrikAkerstrand所说的......

答案 5 :(得分:0)

你只问了原因。

其他原因很好地解释了原因。

仍然是一个解决方案:

你希望'中间'div位于中心位置,所以我想知道这三个div的总页面宽度和宽度。

将“左”和“中间”div保持在div下,将其浮动到左侧。

'right'div将保持不变。