Question

我正在尝试创建一个“阅读更多”文本按钮，我已经成功创建了它，但是当我尝试将它分成两部分时，我遇到了一些问题 - ＆gt;是半文本和半图像/照相馆（它就像一个新闻报道的文章 - 左边是文字，右边是图像）http://jsfiddle.net/nN3Uz/6/。我应该更改这个代码来工作propper我的期望？ 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

Answer 2

默认情况下，所有Div都将显示为块。一个在另一个之下。要并排显示它们，请在相应div的样式中使用 display：inline;

Answer 3

要使边框设置div的最小高度

在方面div中使用 -

min-height：65px;

和图像div -

min-height：400px;

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

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

希望它有所帮助!!

如何制作一个扩展的div，包含半文本和半图像/照相馆，以正常工作？

3 个答案: