CSS 布局高度

Question

我需要在 <div> 中包含两列:

当前 HTML

<div id="corpo">
    <div id="corpo_esquerdo">
        asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd
        ddddddddf asdfasdfasdfasdsdsd asdf asdf sd
        asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd
        ddddddddf asdfasdfasdfasdsdsd asdf asdf sd
    </div>

    <div id="corpo_direito">
        direito sdfasdfasdfasd fasd asfd asdf asdfa sdfa sdf sadf asd
        fasdf asd fasd fasd fasdfa sdfa
    </div>

</div>

当前 CSS

#corpo {
    border: 5px #ffe4c4 solid;
    width: 980px;
    margin: -30px auto;
    background-color: #f5f5f5;
    border-radius: 5px;
    padding: 15px;
    color: #a8a8a8;
    font-size: 20px;
}

#corpo_esquerdo {
    width: 650px;
    float: left;
    border: #bababa solid 2px;
}
#corpo_direito {
    width: 300px;
    float: right;
    background-color: #bababa;
    border-radius: 5px;
    color: #f5f5f5;
    padding: 5px;
}

但是 div#corpo_esquerdo和 div#corpo_direito穿过 div#corpo .

我该怎么做，才能获得 div#corpo_esquerdo和 div#corpo_direito不要越过 div#corpo ？

Answer 1

您还可以将 overflow:auto 添加到 #corpo div

#corpo {
    overflow:auto;
    border: 5px #ffe4c4 solid;
    width: 980px;
    margin: -30px auto;
    background-color: #f5f5f5;
    border-radius: 5px;
    padding: 15px;
    color: #a8a8a8;
    font-size: 20px;
}

在此处查看结果:http://jsfiddle.net/nF5vZ/