jquery - 如何使包含一半文本和一半图像/照片库的扩展 div 正常工作？

Question

我正在尝试创建一个“阅​​读更多”文本按钮，我成功创建了它，但是当我尝试将它分成两部分时我遇到了一些问题 -> 一半是文本，一半是图像/照片库(它就像报纸上的一篇文章 - 左边是文字，右边是图片)http://jsfiddle.net/nN3Uz/6/ .我应该对此代码进行哪些更改才能正常工作？ ps:你可以看到主 div 的尺寸效果不佳，在点击芦苇之前没有文本的轮廓更多......，我应该改变什么才能有边框？ html

<p id="title">Math</p>
<div class="expander" id="aspect">
                <div id="paragraf">
                Paragraph 2: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 
                laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est Excepteur sint occaecat 
                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est Excepteur sint occaecat cupidatat non proident, sunt in c
                ulpa qui officia deserunt mollit anim id est 
                </div>
    <div id="image"><img src=""></div>
        <div id="clear"></div>
        </div>

CSS

#title {
 border:1px solid #800000;
 width:1000px;
 background:#800000;
 color:#fff;
 margin-left:0px;
 font-size: 30px;
 }

#aspect {
width:1000px;
border: 1px solid #800000;
background:#fff;
box-shadow: 5px 5px 5px #494949;
padding-left:10px;
}

#paragraf {
margin-right:10px;
width:500px;
    float:left;
}

#image {
    width:400px;
    height:200px;
    background:blue;
    float:left;
}

#clear {
   clear:both;
}

我知道实现的 javascript 没有问题，但是 html 或 css 有问题导致溢出或任何所谓的我的问题。

Answer 1

将overflow:auto添加到#aspect

#aspect {
    width:1000px;
    border: 1px solid #800000;
    background:#fff;
    box-shadow: 5px 5px 5px #494949;
    padding-left:10px; 
    overflow:auto
}

DEMO