Css 为什么DIV被推到下方而不是侧面？

我试图制作一个“滑出”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;
}

单击“颜色框”，然后单击“显示左div”

---

谢谢大家

假设您的

.left

和

.right

位于

容器内，则被按下的原因是空间不足

您已经为
.container
设置了
宽度：796px
，因此子项，即
。left
和
。right
需要加起来达到
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
at
769px
仍然可以放在它旁边。然后更改为
float:left
是必要的，这样
.left
和
.right
之间就没有间隙，并且当它被侧向推时，它仍然可见。
在
.container
内添加另一个div，这个div足够宽，可以容纳
.left
和
.right


CSS:

标记：

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


A.
B
我不想让容器“放大”，但要让右边的列在容器的外面。你明白我的意思吗？这就是我尝试溢出：隐藏的原因。@pufAmuf:您可以为
.container
设置固定高度，并使
.left
和
.right
具有相同的固定高度。这样，当一个被推到另一个之下时，它将位于
.container
的边缘之下，因此在设置
溢出：隐藏时将不可见。或者，如果高度不同，您可以使用足够宽的内部容器来容纳
.left
和
.right
，溢出物将再次隐藏。谢谢tw16。我用新代码更新了联机链接，注意到右div仍然位于左div的下方，而此时它应该会从屏幕上消失。@pufAmuf:您还没有做我建议的更改。您没有将
.internal_container
的宽度更改为
1396px
，也没有将
.right
更改为
float:left
。对不起，tw16，我的大脑今天不工作了。它起作用了！！：）非常感谢：）嗯，那好像不管用。谢谢你的提示：）让我对公共版本进行更改：）现在请检查我帖子中的链接当你点击按钮时，有一些javascript正在更改
.container
的宽度。除此之外，左边是
.left
，右边是
.right
，看起来不错。你好，Matteo，是的。关键是，在按下按钮之前，左侧的div是隐藏的。当您这样做时，整个容器都会放大，左div会弹出。在这个div中，有一些信息是不完全可见的，除非你将鼠标悬停在上面。当你悬停在它上面时，左边的div变宽，有效地将右边的div推到一边。右div从容器本身溢出，但由于溢出：隐藏，容器外部的部分将不可见：）
<div class="container">
    <div class="inner_container">
        <div class="left">a</div>
        <div class="right">b</div>
    </div>
</div>