html - Div 无缘无故下降？

Question

我有以下CSS

.container {margin-left:auto; margin-right:auto; width:1020px;}
.body {float:left; width:1020px;}
.leftcont {float:left; width:206px;}
.left {float:left; width:205px;border-right-width:thin;border-right-style:solid; padding-right:5px;}
 .right {float:left;width:813px; padding: 20px;}

html:

<div class="container">
<?php
include("navigation/footNav.php");
?>



<div class="body">
    <div class="leftcont">
        <?php
        if($session->logged_in){ 
            include("navigation/sideLogIn.php");
        }
        else
        {
            include("navigation/sideLogOut.php");
        }
        ?>
        <div class="left">
            <div class="bar">
                <h1 class="title">Page Menu</h1>
                <div class="arrow"></div>
                <a href="/settings.php" class="list">My Settings</a>
                <br />
                <div class="arrow"></div>
                <a href="/process.php" class="list">Logout</a>
                <br />
            </div>
        </div>

    </div>
    <div class="right">
        THis text
    </div>
</div>
<?php
include("navigation/footer.php");
?>

leftcont 和 right 应该并排排列。但由于某种原因，右边的 div 低于左边的？

有什么想法吗？

谢谢

Answer 1

您的 .body 宽度为 1020px，其中将包含 .leftcont 的 206px 和 .right 813px，但它不会用 padding: 20px 保持它，这使得宽度有效 843。

您需要减少 .right 上的填充或宽度，或者扩展 .body 上的 with。