Question

我的CSS有点问题。我有一个我试图使用的布局，但是contentHolder的背景，它必须分为menu_left和PageHolder。如果我有.PageContent {float：left;}背景消失，但我删除'float：left;'来自两个div的背景显示我想要的。有没有人有任何想法。

我已在此处发布了我的HTML文件以提供帮助。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Layout Testing</title>
<style>
body
{
    background-color:#003;
}
    .Page
        {
            width: 80%;
            margin-left: auto;
            margin-right: auto;
            font-family: Verdana, Geneva, sans-serif;
        }
    #Heading h1
    {
        padding: 0;
        margin: 0;
    }
    .contentHolder
    {
        background: white;
        position: inherit;
        clear:both;
    }
    #Menu_Left
    {
        width: 20%;
        float: left;
        position: relative;
    }
    .PageContent
    {
        float:left;
        width: 70%;
        position: static;
    }

 </style>
 </head>

<body>
    <div class="Page">
        <div id="Heading">
            <h2>Heading</h2>
        </div>
    <div class="contentHolder">
        <div id="Menu_Left">
        </div>
        <div class="PageContent">
        <h2>content</h2>
        </div>
     </div>
    </div>
</body>
</html>

任何建议都会很棒！

Answer 1

你需要清除浮子。（不清楚：既适用于不能工作的家长）

有几种方法。

1）你可以这样做：

.contentHolder { overflow: hidden; }

2）制作一个明确的div并在.PageContent：

之后添加

CSS：

.clear { clear: both; font-size: 0; line-height: 0; text-indent: 9999px; height: 0; }

HTML：

<div class="contentHolder">
    <div id="Menu_Left">
    </div>
    <div class="PageContent">
    <h2>content</h2>
    </div>
    <div class="clear">&nbsp;</div>
</div>

3）制作一个clearfix类并将其添加到父级：

CSS：

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

HTML：

<div class="contentHolder clearfix">
    <div id="Menu_Left">
    </div>
    <div class="PageContent">
    <h2>content</h2>
    </div>
</div>

Answer 2

当你向左浮动PageContent时，意味着contentHolder中的所有元素都被浮动，所以它的高度变为0而你看不到背景。您需要使contentHolder清除其自身内的所有浮动，以使其高度扩展到其中最高浮动元素的高度。

向contentHolder添加溢出，以使其自我清除其中浮动的任何元素。

.contentHolder {
    overflow: auto;
}

CSS错误 - Div背景不变

2 个答案: