2

我如何根据文本拉伸我的 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 ↓&lt;/a>
</div>
</div>

图片

评论图片 => [评论视图][1]

家长：

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

5 回答 5

1

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

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

这是给你的小提琴

http://jsfiddle.net/znQa8/

希望能帮助到你。

于 2013-01-11T13:15:13.440 回答
1

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

<div class="text">
...
</div>
<div style="clear:both"></div>
于 2013-01-11T13:40:15.023 回答
0

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

于 2013-01-11T13:19:29.033 回答
0

可以添加：

div.body
{
height: auto;
}

但我不确定它不会破坏整个布局

关于我的头疼，你需要清除你的花车：

.cmnt .body
{
    overflow: hidden;
}
于 2013-01-11T13:17:16.037 回答
0

发生的事情是您有一个带有浮动子项的浮动容器。

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

在这篇文章中，您可以看到浮动目的和解决方法列表： http ://www.ejeliot.com/blog/59

这就是我认为迄今为止最好的解决方案，micro clearfix（最好的一点是你可以放入你的css并在你再次需要它时重复使用它）： http: //nicolasgallagher.com/micro-clearfix-黑客/

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

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

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

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

jsfiddle：XZRH5

于 2013-01-11T13:47:54.210 回答