我在获取div(或其值)中的内容以包裹内部并将div的高度调整为内容时遇到问题。
最上面的一个容器,消息框。内部有三个div,如图所示。我需要每个消息都有div,每个消息内容调整其高度以适应内部的内容。我查看了这个网站上的很多帖子,并尝试了很多溢出的组合:隐藏和高度:自动,但它们最终会使每个消息内容滚动到一边,并且最终处于智慧状态。
我怎样才能做到这一点?
****更新了HTML *****
<div className="message-box">
<div className="each-message-box">
<div className="each-message">
<div className="each-message-date">Date</div>
<div className="each-message-content">ContentContentContentContentContentContentContentContentContentContent</div>
</div>
</div>
</div>
</div>
.each-message-box {
width: 100%;
display: block;
overflow: auto;
height: auto;
margin: 1px;
}
.each-message {
width: 270px;
height: 100px;
margin: 2px;
border: 1px solid #ccc;
overflow: hidden;
height: auto;
}
.each-message-date {
border: 1px solid #ccc;
font-size: 10px;
color: #ccc;
text-align: left;
}
.each-message-content {
width: 100%;
border: 1px solid #ccc;
text-align: left;
border-radius: 10px;
height: auto;
}
答案 0 :(得分:1)
打破这样的话不是很优雅,但如果这就是需要的话。除了className
之外,你的HTML中还有一个额外的内容。
编辑:忽略关于className
的评论 - 在发布此答案后添加反应项目评论。
.each-message-box {
width: 100%;
display: block;
overflow: auto;
height: auto;
margin: 1px;
}
.each-message {
width: 270px;
height: 100px;
margin: 2px;
border: 1px solid #ccc;
overflow: hidden;
height: auto;
word-break: break-all;
}
.each-message-date {
border: 1px solid #ccc;
font-size: 10px;
color: #ccc;
text-align: left;
}
.each-message-content {
width: 100%;
border: 1px solid #ccc;
text-align: left;
border-radius: 10px;
height: auto;
}
<div class="message-box">
<div class="each-message-box">
<div class="each-message">
<div class="each-message-date">Date</div>
<div class="each-message-content">ContentContentContentContentContentContentContentContentContentContent
</div>
</div>
</div>
</div>
答案 1 :(得分:0)
创建一个函数,以便在输入字符时实时记录数字,并使用javascript相应地更改容器的宽度。
答案 2 :(得分:0)
如果您的CSS div高度未扩展以适合内容或包装内容。 只需使用一个简单的技巧。
在消息框div的结束标记之前添加一个包含类cl
<div class="message-box"><div class="cl"></div></div>
现在在你的Css中给出这种风格.cl{clear:both;}
如果你在div上有自动高度,它仍将包装内容。我希望它能为你效用。