Css 如何根据文本拉伸div？

如何根据文本拉伸div

我想拉伸div的高度，并将文本用户发布

看屏幕截图，它很清晰

CSS:

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>

形象

[评论意见][1]“>

家长：

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

评论
....

您可以尝试将

float:left

CSS属性添加到外部容器中

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

给你一把小提琴

---

希望有帮助。

可以添加：

div.body
{
height: auto;
}

但我不确定这是否会破坏整个布局

关于我的头痛，你需要清理你的浮标：

.cmnt .body
{
    overflow: hidden;
}

---

最小高度

将是您的解决方案。

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

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

...

发生的事情是，您有一个带有浮动子对象的浮动容器

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

在本文中，您可以看到浮动用途和工作区列表：

这是迄今为止我认为最好的解决方案，micro clearfix（最好的是你可以在css中加入它，并在你需要的时候重用它）：

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

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

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

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

---

jshiddle:XZRH5

这对调整高度有什么帮助？我已经更新了我的帖子。我的意思是使用外部容器，并且达到了预期的效果。@Vogel612，通过不断学习和提高自己来提高CSS知识。@semir.babjic当然我没有别的事可做；））现在我在asp.net和php方面做得太多了，所以我可以“不要浪费太多时间，但ofc您是对的，这是div的默认状态，因为没有高度声明，它已经存在了。hmmm.确定它不会被父属性覆盖，其中定义了总高度？不。您只定义了一个已经存在的最小高度，由图像+填充。。。

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

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