如何根据文本扩展我的div？

Question

如何根据文本扩展我的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>

图像

​

​

父级：

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

Answer 1

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

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

这是给你的小提琴，

http://jsfiddle.net/znQa8/

希望能有所帮助。

Answer 2

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

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

Answer 3

可以添加以下内容：

div.body
{
height: auto;
}

但我不确定它不会毁掉整个布局

关于我的头部受伤，你需要清理你的浮标：

.cmnt .body
{
    overflow: hidden;
}