我在基本 DIV 布局和定位方面遇到问题

Question

我为一个网站创建了一个注册页面，现在想在注册字段的左侧添加一些图片。所以我是否试图让 PictureWall 出现在容器中的 SignupBox 旁边。然而，注册框只是被推下。

这是我的html：

<div id = "Container">
    <div id ="PictureWall">
        <div class = "image">
        </div
        <div class = "image">
        </div>
        <div class = "image">
        </div>
    </div>
    <div id = "SignUpBox">
        <table id = "SignUpTable">
        <p id = "SubHeading">Sign Up.</p>
            <form name = "NewUser" onsubmit= "validateForm()" action = "">
                <tr>
                <td class = "FieldName">Username:</td> 
                <td class = "TextField"><input type = "text" name = "user"/></td> 
                </tr>
                <tr>
                <td class = "Information"><em>Must be 4-11 characters.<br/>Only numbers, letters and underscores.</em></td>
                </tr>

                <tr>
                <td class = "FieldName">Email:</td> 
                <td class = "TextField"><Input type = "text" name = "email"/></td>
                <tr>
                <td  class = "Information"><em>We need this to verify your account.</em></td>
                </tr>

                <tr>
                <td class = "FieldName">Password:</td>
                <td class = "TextField"><input type = "password" name = "pwd"/></td>
                <tr>
                <td  class = "Information"><em>6-20 characters</em></td>
                </tr>

                <tr>
                <td class = "FieldName">Confirm Password:</td>
                <td class = "TextField"><input type = "password" name = "confirmPwd"/></td>
                <tr>
                <td  class = "Information"><em>just in case you didn't make mistakes!</em></td>
                </tr>

                <!-- Optional -->


                <tr>
                <td class = "FieldName">First Name:</td>
                <td class = "TextField"><input type = "text" name = "fName"/></td>
                <tr>
                <td  class = "Information"><em>optional</em></td>
                </tr>

                <tr>
                <td class = "FieldName">Lastname:</td>
                <td class = "TextField"><input type = "text" name = "lName"/></td>
                <tr>
                <td  class = "Information"><em>(optional)</em></td>
                </tr>

                <tr>
                <td><input type = "submit" value = "Submit"/></td>
                </tr>

        </table>



            </form>
    </div>
</div>

这是我的 CSS：

/*  Style Sheet*/

body
{
margin: 0;
padding: 0;
background-color:white;
}

#TopBar
{
    background-color: #3299E3;
    width: 100%;
}
#SignUpLogo
{
    margin-left: 5em;
    width: 100px;
    height: 70px;
    font-family: Helvetica;
    font-size: 60px;
    text-align: centre;
    color: white;
}
#Container
{
    padding-top: 5px;
    width: 90%;
    height:100%;
    margin-left: 5%;
    -webkit-box-shadow: 0 0 5px 2px grey;
    -moz-box-shadow: 0 0 5px 2px grey;
    box-shadow: 0 0 5px 2px grey;
    background-color: F7F7F7;
}
#PictureWall
{
    width: 100px;
    height: 100%;
    background-color: red;
    position:relative;
}
.image
{
    height: 50px;
    width: 50px;
    background-color: blue;
}
#SubHeading
{
    padding-left: 750px;
    color:grey;
}
#SignUpBox 
{
    font-family: Helvetica;
    font-size: 40px;
    text-align: centre;
    color: black;
    float:right;

}
#SignUpTable
{
    margin-top:50px;
    font-size: 15px;
    font-family: Helvetica;
    margin-left: 700px
}
.FieldName
{
    padding-right:100px;
    padding-left:50px;
}
.TextField
{
    padding-top:5px;
}
.Information
{
    font-size: 11px;
    color: black;
    padding-left:50px;
    padding-bottom: 10px;
}

Answer 1

请确保您的代码通过验证。之后在您的 PictureWall 上执行 float: left 并在您的 SubHeading 和 SignUpBox 上省略 float: right; 和 padding-left: 750px;

小提琴：http://jsfiddle.net/Xnh4X/

Answer 2

float 不会使应用它的元素向上移动。它让跟随元素的内容向上移动。

由于#PictureWall 出现在#SignUpBox 之前，您需要浮动#PictureWall 是否希望它们使用浮动并排出现。