1

我正在尝试创建一个“阅​​读更多”文本按钮，我成功创建了它，但是当我尝试将它分成两部分时遇到了一些问题 - >成为一半文本和一半图像/照片库（它就像一个报纸的文章 - 左边是文字，右边是图片）http://jsfiddle.net/nN3Uz/6/。我应该对此代码进行什么更改以支持我的期望？ps：你可以看到主div的dimensoin效果不好，在点击reed more之前文本没有轮廓......，我应该改变什么才会有边框？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 有问题导致溢出或任何所谓的问题。

4

3 回答 3

1

添加overflow:auto到#aspect

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

演示

于 2013-03-18T09:19:17.083 回答
0

默认情况下，所有 Div 将显示为块。一个低于另一个。要并排显示它们，请使用display:inline; 以您的风格为相应的 div

于 2013-03-18T09:04:09.697 回答
0

要获得边框，请设置 div 的最小高度

在方面 div 使用-

最小高度：65px；

对于图像 div -

最小高度：400px；

并确保您使用高度和宽度小于或等于 div 图像大小但不大于该大小的图像。否则在 HTML 中使用

<div id="image"><img src="" height="200" width="400"></div>

希望能帮助到你！！

于 2013-03-18T09:20:09.540 回答