Question

我的页面上有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;
}

Answer 1

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

Answer 2

~~在CSS .left添加~~

中
display:inline-block;

~~.right~~

相同

编辑：

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

Answer 3

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

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

也许你可以这样做：

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

Answer 4

这是可能的更正

#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;
}

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

Answer 5

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

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

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

Answer 6

你只问了原因。

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

仍然是一个解决方案：

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

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

'right'div将保持不变。

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

6 个答案: