html - 对齐我的一些框的CSS布局问题

Question

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

这张图片显示了我想要做的事情：

但是我有一些问题。我可以让盒子 1 正常工作，当我把盒子 2,3 和 4 放在适当的位置时，它们会去我想要的地方。

然而，对于盒子 5，它会进入正确的位置，但它也会迫使盒子 4 从与其相同的高度开始。如图所示：

我的代码是：

我找不到 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>

score 2 · Accepted Answer

2

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

于 2013-05-09T16:37:12.263 回答

score 0 · Accepted Answer

代码太多。但是也许你已经固定了 Box 3 的宽度。现在下一个代码是 Box 5，如果它可以容纳，它将与 Box 3 在同一行，它不能，所以它移动到下一行。Box 4 也是如此，这次它与 Box 5 位于同一行。一种解决方案可以在 Box 5 之前定义 Box 4。其他解决方案可以将 Box 3 和 Box 4 放在一个公共 div 中，Box 3 向左浮动，宽度属性集。

score 0 · Accepted Answer

       <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>，仅此而已

html - 对齐我的一些框的CSS布局问题

3 回答 3

Related

Reference