为什么DIV被推到下面而不是在旁边？

Question

我试图制作一个“滑出”div，当它悬停在它上面时滑出。我想要发生的是我想让左边的div将右边的div推开，但不是低于div，而是右边。 有谁知道为什么会发生这种情况？

这里是我的脚本：

.container { 
    width: 796px; 
    background-color: yellow; 
    overflow:hidden; 
} 
.left { 
    display:none; 
    float: left; 
    width: 256px; 
    background: green; 
} 
.right { 
    float: right; 
    width: 796px; 
    height: 100%; 
    background-color: red; 
} 

Here is a live demo 点击 '颜色框'，然后选择 '显示左格'。

谢谢大家！ :)）））

Answer 1

假设您的.left和.right在.container之内，被推倒的原因是因为没有足够的空间。

您已设置为.container等孩子即.left和.right需要加起来796px一个width:796px。目前他们加起来为1052px，所以他们中的一个被推倒了，因为他们不能并排放在一起。

编辑：使用内容器方法在我的评论中提到和@ Matteo的答案中提到你需要调整下面的CSS。

.inner_container{ 
    width: 1396px; /* changed from 1052px */ 
} 
.right { 
    background-color: red; 
    float: left; /* changed from right */ 
    height: 100%; 
    width: 796px; 
} 

它需要1396px是因为它需要足够大，当.left扩展到600px是.right在769px仍然可以适应它旁边的原因。然后更改为float:left是必要的，以便.left和.right之间没有间隙，并且在侧向推动时它仍保持可见。

Answer 2

在.container内部添加另一个div，其宽度足以容纳.left和.right。

http://jsfiddle.net/DRnRQ/

CSS：

.container { 
    width: 796px; 
    height: 300px; 
    background-color: yellow; 
    overflow:hidden; 
} 
.left { 
    float: left; 
    width: 256px; 
    background: green; 
} 
.right { 
    float: right; 
    width: 796px; 
    height: 100%; 
    background-color: red; 
} 
.inner_container { 
    width: 1052px; 
} 

MARKUP：

<div class="container"> 
    <div class="inner_container"> 
     <div class="left">a</div> 
     <div class="right">b</div> 
    </div> 
</div>