Question

我要去三列（我原本不想要这个，但它看起来最适合我的项目）。右边的一个是坚持留在中间的一个，即使它漂浮在右边。我应该改变什么？

整个事情实际上会放在另一个div中，但这似乎并不重要。我已将代码简化为有问题的区域：

<style>

.contain {
border:1px solid;
width:639px;
height:500px;
}


.subAreaLeft{
float:left;
position:relative;
width:205px;
border:1px solid;
}

.subAreaMid{
margin: 0 auto;
position:relative;
width:205px;
border:1px solid;
}

.subAreaRight{
width:205px;
position:relative;
float:right;
border:1px solid;
}

</style>

</head>

<body>


<div class="contain">

<div class="subAreaLeft" id="contactInfo">
ONE
</div>

<div class="subAreaMid">
TWO
</div>

<div class="subAreaRight">
THREE
</div>

</div>

</body>

Answer 1

为了使所有三个div向左浮动，div中的所有三个都需要CSS中的float: left。

Answer 2

<body>


<div class="contain">

<div class="subAreaLeft" id="contactInfo">
ONE
</div>



<div class="subAreaRight">
THREE
</div>

<div class="subAreaMid">
TWO
</div>

</div>

</body>

你只需要把中间DIV放在THird之后

http://jsfiddle.net/zJkHE/检查此

Answer 3

解决方案不是修改任何CSS。别这么说了。

而是将subAreaMid div直接移到HTML中的subAreaRight之后。

<div class="subAreaLeft" id="contactInfo">
ONE
</div>]

<div class="subAreaRight">
THREE
</div>

<div class="subAreaMid">
TWO
</div>

这可确保subAreaMid div不会清除，并提供所需的结果。

第三，右浮动div低于中间div

3 个答案: