Question

我有一个包含以下div的网页。

<div id="main">
    <div id=left></div>
    <div id=right></div>
</div>

由于页面的主体是背景颜色蓝色并假设 div left和div right是白色的。当说右权利的内容到达时 div main的高度，div main不扩展所以它看起来很奇怪。

当div右侧扩展时，如何让div main扩展？

希望这不会令人困惑。

马尔科姆

Answer 1

我假设“左”和“右”意味着你用CSS左右浮动它们。

如果是，您需要clear them。使您的HTML看起来像这样：

<div id="main">
    <div id=left></div>
    <div id=right></div>
    <br style='clear: both;'>
</div>

Answer 2

您可以（需要）使用reset css文件来处理这类css问题。您可以看到有关Yahoo重置css文件的详细信息from here

希望这有助于

Answer 3

您的'左'和'右'div是否已浮动？默认情况下，“main”div不会在其包含的浮动元素周围展开。您可以通过在CSS中将overflow: auto添加到div#main来解决此问题。

Answer 4

您可以尝试这样的事情：

<html>
<head>
<style>
#equal      {
        overflow: hidden;
        }

#left, #right{
        padding-bottom: 5000px;
        margin-bottom: -5000px;
        width: 150px;
        }

#left       {
        float: left;
        background-color: red;
        }

#right      {
        float: right;
        background-color: green;
        }
</style>
</head>
<body>
<div id="main">
<div id="equal">
<div id="left">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div>
<div id="right">blah blah blah blah blah blah </div>
</div>
</div>
</body>
</html>

Answer 5

你应该将overflow：hidden属性赋予#main的CSS。您还应始终引用属性值。（你没有把id分配给#left和#right）

HTML - 调整div

5 个答案: