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的{{1}}和206px .right，但它不会将813px与padding: 20px保持在一起，从而使宽度有效843。

您需要减少.right上的填充或宽度，或者展开.body上的内容。

Answer 2

206 + 813 + 20 + 20 = 1059

您需要减小leftCont或right的宽度，或减少right的填充。

Div无缘无故下降？

2 个答案: