2

分割された構造を作成しようとしているときに、背景色をカバーするのに苦労しています。以下の例では、wrapdivは他のレイヤーをカバーしていません。私が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 に答える