对齐我的框的CSS布局问题

时间：2013-05-09 16:28:32

标签： html css layout

我正在尝试使用div标签创建一个css模板。

我想要做的事情如下图所示：

http://i42.tinypic.com/9blvnp.png

但是，我有一些问题。我可以让方框1工作得很好，当我把方框2,3和4放在适当的位置时，他们会去我想要的地方。

然而，对于方框5，它位于正确的位置，但它也迫使方框4从与它相同的高度开始。如图所示：

http://i41.tinypic.com/344zgnc.png

我的代码是：

我找不到html现场演示，但复制并将其粘贴到一个应该可以正常工作

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Leopold Planning </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untited Document</title>
<style type="text/css">
*
{
    margin: 0 auto;
}
body
{
    background-image:url(background.png);
    background-color:#1f54bd;
    background-repeat:repeat-x;
    background-attachment:fixed;
    margin-top:0px;
    text-align: center;
    font-family:Lucinda Bright;
    font-size: 14px;
}
.contain
{
    width:1000px;
    margin: 0 auto;

}
.info
{
    width: 500px;
    background-color: white;
    float: right;
    margin-top: 10px;
    padding: 5px;
    margin-right: 300px;
}
.info1
{
    width: 990px;
    background-color: white;
    float: right;
    margin-top: 10px;
    padding: 5px;

}
.contact
{
    width: 200px;
    background-color: white;
    float: right;
    margin-top: 10px;
    padding: 5px;
}


#navigation 
{
font-size:1.2em; 
width:180px;
margin-left: 0px;
margin-top: 10px;
float:left;
overflow: hidden;
}
#navigation ul
{
margin:0px; 
padding:0px;
}
#navigation li 
{
list-style: none;
} 

ul.top-level 
{
background:#ffffff
}
ul.top-level li {
 border-bottom: #C0C0C0 solid;
 border-width: 1px;
}

#navigation a {
 color: #D4A017;
 cursor: pointer;
 display:block;

 line-height: 25px;
 text-indent: 0px;
 text-decoration:none;
 width:100%;
}
#navigation a:hover{
 color: #fff;
 text-decoration:none;
}

#navigation li:hover {
 background: #2554C7;
 position: relative;
}

.contact_info
{
    width:180px;
    background-color: white;
    float: left;
    margin-top: 5px;
    overflow: hidden;
}
.mainbody {
    width: 500px;
    background-color: white;
    float:left;
    margin-top: 10px;
    margin-left: 10px;
    overflow: hidden;
    padding: 5px;
}
.phone {
    width: 280px;
    background-color: white;
    float: right;
    margin-top: 10px;
    margin-left: 10px;
    overflow: hidden;
    padding: 5px;
}












</style>

</head>

<body>

<!-- banner removed  -->



<!-- container -->
<div class="contain">

<!-- WELCOME MESSAGE -->

    <div class="info1">
    <h2> Welcome to Leopold Planning</h2>
    <p>Thank you for visiting Leopold Planning, we hope you find what you are looking for and we are always willing to help!</p>
    </div>

<!-- NAVIGATION -->
    <div id="navigation">
                <ul class="top-level">

                <li><a id="displayText2" href="javascript:App();"><b>Planning Application</b></a></li>
                <li><a id="displayText3" href="javascript:cert();"><b>Certificate of Lawfulness Applications</b></a></li>
                <li><a id="displayText1" href="javascript:Appeal();"><b>Planning Appeals</b></a></li>
                        <li><a id="displayText" href="javascript:statement();"><b>Planning Statements</b></a></li>
                        <li><a href="#"><b>Site Appraisals/Stalled Sites</b></a></li>      

                        </ul>
    </div>

<!-- Main Body -->
    <div class="mainbody">

    <!-- top navigation -->
    <div id="navigation1">
        going to have three links here
    </div>
    </div>
    <!-- main content -->
    <div class="mainbody">
    sadas



    </div>

<!-- Phone back -->
    <div class="phone">
    <h3>Phone Back</h3>
    <table align="center">
    <form action="" method="post">
    <tr><td align="left">Name:<font color="red">*</font></td><td> <input type="text" name="name_p" /></td></tr>
    <tr><td align="left">Number:<font color="red">*</font></td><td> <input type="text" name="number_p" /></td></tr>
    <tr><td colspan="2"><input type="submit" name="p_submit" /></td></tr>
    </form>
    </table>
    </div>
<!-- Contact -->

<!-- Twitter -->







</div>




</div>
</div>
</div>
</body>
</html>

3 个答案:

答案 0 :(得分：2)

在HTML中，将Phone back的代码放在Mainbody div之前

答案 1 :(得分：0)

代码太多了。但也许你已经修改了Box 3的宽度。现在下一个代码是Box 5，如果它可以适合它将与Box 3在同一行，它不能，所以它移动到下一行。同样适用于Box 4，这次与Box 5在同一行。一个解决方案可以在Box 5之前定义Box 4.其他解决方案可以将Box 3和Box 4放在一个公共div中，Box 3向左浮动width属性设置。

答案 2 :(得分：0)

       <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Leopold Planning </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untited Document</title>
    <style type="text/css">
    *
    {
        margin: 0 auto;
    }
    body
    {
        background-image:url(background.png);
        background-color:#1f54bd;
        background-repeat:repeat-x;
        background-attachment:fixed;
        margin-top:0px;
        text-align: center;
        font-family:Lucinda Bright;
        font-size: 14px;
    }
    .contain
    {
        width:1000px;
        margin: 0 auto;

    }
    .info
    {
        width: 500px;
        background-color: white;
        float: right;
        margin-top: 10px;
        padding: 5px;
        margin-right: 300px;
    }
    .info1
    {
        width: 990px;
        background-color: white;
        float: right;
        margin-top: 10px;
        padding: 5px;

    }
    .contact
    {
        width: 200px;
        background-color: white;
        float: right;
        margin-top: 10px;
        padding: 5px;
    }


    #navigation 
    {
    font-size:1.2em; 
    width:180px;
    margin-left: 0px;
    margin-top: 10px;
    float:left;
    overflow: hidden;
    }
    #navigation ul
    {
    margin:0px; 
    padding:0px;
    }
    #navigation li 
    {
    list-style: none;
    } 

    ul.top-level 
    {
    background:#ffffff
    }
    ul.top-level li {
     border-bottom: #C0C0C0 solid;
     border-width: 1px;
    }

    #navigation a {
     color: #D4A017;
     cursor: pointer;
     display:block;

     line-height: 25px;
     text-indent: 0px;
     text-decoration:none;
     width:100%;
    }
    #navigation a:hover{
     color: #fff;
     text-decoration:none;
    }

    #navigation li:hover {
     background: #2554C7;
     position: relative;
    }

    .contact_info
    {
        width:180px;
        background-color: white;
        float: left;
        margin-top: 5px;
        overflow: hidden;
    }
    .mainbody {
        width: 500px;
        background-color: white;
        float:left;
        margin-top: 10px;
        margin-left: 10px;
        overflow: hidden;
        padding: 5px;
    }
    .phone {
        position: relative;
        width: 280px;
        background-color: white;
        float: right;
        margin-top: 10px;
        margin-left: 10px;
        overflow: hidden;
        padding: 5px;
        clear: none;
    }












    </style>

    </head>

    <body>

    <!-- banner removed  -->



    <!-- container -->
    <div class="contain">

    <!-- WELCOME MESSAGE -->

        <div class="info1">
        <h2> Welcome to Leopold Planning</h2>
        <p>Thank you for visiting Leopold Planning, we hope you find what you are looking for and we are always willing to help!</p>
        </div>

    <!-- NAVIGATION -->
        <div id="navigation">
                    <ul class="top-level">

                    <li><a id="displayText2" href="javascript:App();"><b>Planning Application</b></a></li>
                    <li><a id="displayText3" href="javascript:cert();"><b>Certificate of Lawfulness Applications</b></a></li>
                    <li><a id="displayText1" href="javascript:Appeal();"><b>Planning Appeals</b></a></li>
                            <li><a id="displayText" href="javascript:statement();"><b>Planning Statements</b></a></li>
                            <li><a href="#"><b>Site Appraisals/Stalled Sites</b></a></li>      

          </ul>
        </div>

    <!-- Main Body -->
        <div class="mainbody">

        <!-- top navigation -->
        <div id="navigation1">
            going to have three links here
        </div>


        <!-- main content -->
        <div class="mainbody">
        sadas
        </div>
        </div>
     <div class="phone">
        <h3>Phone Back</h3>
        <table align="center">
        <form action="" method="post">
        <tr><td align="left">Name:<font color="red">*</font></td><td> <input type="text" name="name_p" /></td></tr>
        <tr><td align="left">Number:<font color="red">*</font></td><td> <input type="text" name="number_p" /></td></tr>
        <tr><td colspan="2"><input type="submit" name="p_submit" /></td></tr>
        </form>
        </table>
     </div>


    <!-- Phone back -->

    <!-- Contact -->

    <!-- Twitter -->







    </div>




    </div>
    </div>
    </div>
    </body>
    </html>

这应该适合你，你错放了一些</div>，这就是所有

相关问题
最新问题