css - 无法弄清楚我的CSS有什么问题

Question

只是有一个小的 css 问题...

我在一个 div 中有几个 div，它们都包含在 wrappe 中，

即

<div wrapper>
<div bodyWrapper>
     <div bodyLeft></div>
          <div bodyRight></div>

</div>
</div>

这不是全部代码，它们之间还有额外的代码，但问题出在 css 上。我将 wrapper 的主要背景设置为黑色，其余所有设置为白色。 body(左和右)标签都显示为白色，但 bodywrapper 标签似乎没有任何效果，因此如果它们的长度不同，body 标签下方会有黑色空间。我能做些什么来对它进行排序吗？

这是CSS代码

   #wrapper #bodywrapper {
border: 20px solid #000;
background-color: #FFF;
margin: 0px;
padding: 0px;
height: auto;
width:auto;
}

    #wrapper #bodywrapper #bodyleft {
margin: 0px;
height: auto !important;
width: 630px;
float: left;
background-color: #FFF;
padding-top: 40px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 20px;
overflow: hidden;
}


#wrapper #bodywrapper #bodyright {
margin: 0px;
float: right;
height: auto;
width: 280px;
background-color: #FFF;
padding-top: 40px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
color: #FFF;
background-image: none;
} 

Answer 1

人造列可以工作，但如果您采用纯 CSS 方法，您可以尝试来自 www.ejeliot.com 的等高列

http://jsfiddle.net/spacebeers/s8uLG/3/

您将容器设置为 overflow hidden ，然后在每个 div 上添加负边距底部和相等的正填充底部。

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

<div id="container">
   <div>
        <p>Content 1</p>
   </div>
   <div class="col2">
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
   </div>
</div>