CSS Div高度未扩展以适合内容或包装内容

时间:2018-05-24 03:15:56

标签: javascript html css

我在获取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;
}

enter image description here

3 个答案:

答案 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>

的div

现在在你的Css中给出这种风格.cl{clear:both;}

如果你在div上有自动高度,它仍将包装内容。我希望它能为你效用。