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 点击'colorbox'，然后'show left div'。

谢谢大家！：））））

Answer 1

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

您为width:796px设置了.container，因此.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 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>

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

2 个答案: