html - 内容区域不覆盖内容框

Question

基本上，我的这段代码有一个内容区域，在该内容区域中有两个框相互 float 。内容区域的背景色为白色，应该也覆盖其他框的区域，但由于某些原因没有。我试过给盒子一个白色的背景颜色，但背景没有出现。我也尝试过更改一些 div 语句的溢出属性，但这也没有帮助。有任何想法吗？

JS Fiddle

HTML5

<div class="wrapper">
    <div id="content">
        <!-- #BeginEditable "content" -->
            <h1 class="center">Home</h1>

        <div id="content-box2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere sodales justo at faucibus. Integer pharetra sagittis mauris, et sollicitudin arcu rhoncus ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur adipiscing scelerisque mauris, id adipiscing nulla placerat non.</p>
        </div>
        <div id="content-box3">
            <p class="align-right">Neque porro quisquam est qui
                <br>Neque porro quisquam est qui
                <br>Neque porro quisquam est qui
                <br>Neque porro quisquam est qui
                <br>Neque porro quisquam est qui
                <br>Neque porro quisquam est qui
                <br>Neque porro quisquam est qui</p>
        </div>
        <!-- #EndEditable -->
    </div>
</div>

CSS3

body    {
    background-color: gray;
    color: #202020;
    font: normal .90em"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    margin: 0;
    text-align: left;
}

.wrapper {
    margin: 0 auto;
    width: 980px;
}

#content {
    background-color: #FFFAF0;
    margin: 2% auto;
    padding: 10px 25px;
    width: 88%;
}

#content-box2 {
    float: left;
    padding-left: 80px;
    width: 40%;
}

#content-box3 {
    float: left;
    padding-right: 80px;
    width: 40%;
}

.align-right {
    text-align: right;
}

Answer 1

您正在使用 float: left; 这不会使 div 展开，请尝试使用 display: inline-table;

JS Fiddle