Question

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

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

即

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

</div>
</div>

这不是所有的代码，所有代码之间都有额外的，但问题在于css。我将包装器的主要背景设置为黑色，其余部分设置为白色。身体（左侧和右侧）标签都呈现白色但是身体包装标签看起来没有效果，因此如果它们没有相同的长度，则身体标签下面会有黑色空间。有什么办法可以对它进行排序吗？

这是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

这可能会有所帮助，Faux专栏：http://www.alistapart.com/articles/fauxcolumns/

Answer 2

人造柱可以使用，但如果您使用的是纯CSS方法，可以尝试使用www.ejeliot.com的等高柱

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

你设置你的容器，溢出设置为隐藏，然后在每个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>

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

2 个答案: