Question

基本上我有这个代码，它有一个内容区域，并且内容区域有两个相互浮动的盒子。内容区域的背景颜色为白色，也应该覆盖其他框的区域，但由于某种原因没有。我试过给盒子背景颜色为白色，但背景没有显示出来。我也试过更改一些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

内容区域不会延伸到内容框

1 个答案: