Question

在尝试创建div'结构时，我很难覆盖背景颜色。在下面的示例中，换行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>

Answer 1

你必须清除你的花车：

#wrap {
    background-color:#FF0;
    overflow: hidden;
}

创造动态高度

1 个答案: