等高柱的问题

Question

这是我的CSS：

#contents { clear: both; width: 900px; background: #fff url(../img/contents_bg.jpg) repeat-y; }
#contents .left { float: left; width: 615px; padding: 10px 0 0 20px; }
#contents .right { float: right; width: 225px; padding: 10px 20px 0 0; }

和HTML：

<div id="contents">
 <div class="left">
  <p>test</p>
 </div>
 <div class="right">
  <p>test 2</p>
 </div>
</div>

出于某种原因，除非我在#contents上放置一个高度，否则我不能显示contents_bg.jpg背景图片，任何想法？

Answer 1

您的div＃内容未浮动，因此不会延伸以包含其浮动内容。 Floatutorial是一个很好的阅读。该方案还有其他解决方法，但大多数都包括引入一些不必要的标记，例如div＃contents底部的清除div。