创建动态高度

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

来源

2012-09-02 cevizmx

你要清楚你的花车：

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

来源

2012-09-02 00:57:34

谢谢！它的工作:)我已经尝试添加与明确类的div：两者，但它没有锻炼如此之好。那么，再次感谢你！ – cevizmx

欢迎您:) –

创建动态高度

回答

相关问题