2

在尝试创建 div 的结构时，我很难覆盖背景颜色。在下面的示例中，wrap div 没有覆盖其他层。我在 css 中遗漏了一些东西，但无法弄清楚问题所在:(任何帮助都会很棒:)

<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
    font-family: Arial;
}
html {
    height: 100%;
}
body {
    background: #688420;
    height: 100%;
    font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
}
#column {
    position: relative;
    width: 950px;
    margin: auto;
}
#wrap {
    background-color:#FF0;
}
.wrapleft {
    background-color: #039;
    text-align: left;
    float:left;
    width:60%;
}
.wrapright {
    background-color:#3F9;
    text-align:left;
    float:left;
    width: 35%;
}
.seperator {
    width:5%;
    background-color:#9CC;
    float:left;
}
.space {
    width:100%;
    height:20px;
    clear:both;
}
#wrapContent {
    background-color: #C3F;
}
</style>
</head>

<body>
<div id="main">
    <div id="column">
        <div id="wrapContent">
            <div id="wrap">
                <div class="space">&nbsp;</div>
                <div class="wrapleft">
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris.  </p>
                </div><!-- wrapleft -->
                <div class="seperator">&nbsp;</div>
                <div class="wrapright">
                                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris.  </p>
                </div> <!-- wrapright -->
                <div class="space">&nbsp;</div>
                                <div class="wrapleft">
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris.  </p>
                </div><!-- wrapleft -->
                <div class="seperator">&nbsp;</div>
                <div class="wrapright">
                                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris.  </p>
                </div> <!-- wrapright -->


            </div><!-- wrap -->

    </div> <!-- column -->
</div> <!-- main -->
</body>
</html>
4

1 回答 1

1

你必须清除你的花车：

#wrap {
    background-color:#FF0;
    overflow: hidden;
}
于 2012-09-02T00:57:34.940 回答