1

我有两个 div 包含在一个更大的 div 中，我希望它们彼此相邻放置。我的方法是将第一个 div 向左浮动并设置溢出：隐藏在包含的 div 上。由于某种原因，它不起作用，第二个 div 最终位于第一个 div 之上。

Herse 是演示，http://jsfiddle.net/9xmDP/。我有一些颜色编码，用于尝试调试重叠。代码也在下面。注册表单应该在登录表单旁边，而不是在它的顶部。

HTML

<div id="container">    
<div id="signupDiv">
    <div id="signupLabel">
        SignUp
    </div>
    <form id="signupForm">
        User <input type="text" name="user"><BR/>
    </form>
</div>

<div id="loginDiv">
    <div id="loginLabel">
          Login
    </div>            
    <form id="loginForm">
        User <input type="text" name="user"><BR/>
    </form>
</div>

​</p>

CSS

    #container{
    overflow: hidden;
}

#signupLabel{
    border: solid black 1px;
    width: 300px;
}

#signupDiv{
    float:left;
}

#loginLabel{
    border: solid red 1px;
    width: 300px;
    }

#loginDiv{
    width: 300px;
    border: solid pink 1px;
}
4

5 回答 5

1

你也需要float:left #loginDiv。在此处查看您更新的小提琴：

http://jsfiddle.net/9xmDP/2/

于 2012-12-28T20:14:55.380 回答
1

当你浮动一个元素时，它会从正常的内容流中移除，并且它的父元素和父元素的其他子元素中的任何内容都会尝试环绕它。

所以 thesignupDiv确实是向左浮动的，这将它放在了 non-floating 的顶部loginDiv。中的内容loginDiv确实试图环绕signupDiv，但是由于您已将两个元素都指定为 300px 宽，因此没有空间放置它，因此它必须位于浮动 div下方。

最简单的解决方案是浮动两个div，如下所示：

#signupDiv, #loginDiv {
    float: left;
}
于 2012-12-28T20:16:14.913 回答
1

您可以通过使它们都浮动来将 div 彼此相邻放置。如果您将容器设置为 605px，那么 div 将适合其中（包括边框）

#container{
    width: 605px;
    overflow: hidden;
}

和这个

#loginDiv{
    float: left;
    width: 300px;
    border: solid pink 1px;
}
于 2012-12-28T20:16:15.553 回答
1

Display:inline 也可以在这里解决问题.. http://jsfiddle.net/9xmDP/4/

#loginDiv{
width: 300px;
border: solid pink 1px;
display:inline-block;
}
于 2012-12-28T20:17:41.683 回答
1

试试这个 CSS。在这里摆弄

#container{
width:604px;
}

#signupLabel{
border: solid black 1px;
width: 300px;
}

#signupDiv{
float:left;
width:300px;
}

#loginLabel{
border: solid red 1px;
width: 300px;
}

#loginDiv{
width: 300px;
float:left;
border: solid pink 1px;
}

​</p>

于 2012-12-28T20:18:30.187 回答