我怎么能按照文字来拉伸我的div?

时间:2013-01-11 13:11:35

标签: css html height stretch

我如何根据文字拉伸我的div

我希望拉伸div的高度,并发布文本用户

看着屏幕拍摄清晰。

CSS:

.cmnt{ width: 570px; margin-top: 10px; margin-bottom: 10px; float: right; margin-right:     15px; clear:both; }
.cmnt .body{ width: 570px; background: #333333; min-height: 90px; height: auto; }
.cmnt .text{ width: 513px; float: left; font-family: arial; color: #FFF; }
.cmnt .arrow{ width: 570px; height: 7px; background: url(../img/comment_arr.jpg) no-repeat     17px top; }
.cmnt .info{ width: 470px; height: 20px; font-family: arial; font-size: 14px; color: #FFF; float: left; text-align: left; }

HTML:

<div class="cmnt">
<a name="comment-id" />
<div class="body">
<div class="text">
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
</div>
<img class="avatar" src="assets/img/cmnt-u.jpg" align="absmiddle" />
</div>
<div class="arrow"></div>
<div class="info">
&nbsp;&nbsp;smith (date)
</div>
<div class="rp">
<a href="#comment">reply ↓</a>
</div>
</div>

图像

Comment Image => [comment view][1]

家长:

<div class="comment">
<div class="cmntHeader">Comments</div>
<div class="cmntBody">
<center>
....
</center>
</div>
</div>

5 个答案:

答案 0 :(得分:1)

您可以尝试在外部容器中添加float: left CSS属性。

.cmnt .body{ float: left; width: 570px; background: #333333; min-height: 90px; height: auto; }

这是你的小提琴

http://jsfiddle.net/znQa8/

希望它有所帮助。

答案 1 :(得分:1)

如果未指定,则根据子(非浮动)元素自动调整容器的高度。 因为div(class = text)是浮动的,所以它的高度没有考虑在内。无论何时使用浮子,系统地尝试在解决高度问题之后将其清除。

<div class="text">
...
</div>
<div style="clear:both"></div>

答案 2 :(得分:0)

可以添加:

div.body
{
height: auto;
}

但我不确定它是不是要杀死整个布局

关于My Head Hurts,您需要清除浮子:

.cmnt .body
{
    overflow: hidden;
}

答案 3 :(得分:0)

min-height将是您的解决方案。

答案 4 :(得分:0)

发生的事情是你有一个漂浮儿童的浮动容器。

在这种情况下,浮动容器“忽略”子维度。这可能是实现float的真正主要目标的副作用(即在包装文本上有浮动图像)。

在本文中,您可以看到浮动目的和工作周围列表: http://www.ejeliot.com/blog/59

这就是我认为目前为止最好的解决方案,微清除(最好的是你可以放入css并在需要时再次使用它): http://nicolasgallagher.com/micro-clearfix-hack/

只需将此css块添加到您的css文件中:

/*THE CLEARFIX HACK*/
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

然后将clearfix类添加到“body”div。

jsfiddle:XZRH5