Question

我有一些html内容具有以下结构：

<div class="message-container">
  <p class="message-value">someVal</p>
  <div class="message-attribute">someUsername</div>
  <div class="message-attribute">11-09-2017 12:30</div>
</div>

所以，我希望在message.value中获取长值时将我的消息容器扩展，并尽可能将其缩小到最小宽度。

我也不想为这个道具指定最大宽度。

我做到了这一点：

.message-container {
  resize: both;
  margin: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  color: #ffffff;
  border-radius: 20px;
  min-width: 100px;
  max-width: 400px;
  width: auto;
  height: auto;
  background-color: #80CBC4;
}

.message-value {
  resize: both;
  float: left;
  max-width: 380px;
  word-wrap: break-word;
  height: auto;
}

.message-attribute {
  padding-left: 50px;
  width: 150px;
  display: block;
  color: #607D8B;
}

和message-username和message-datetime具有固定宽度。

最后，我总是在message-container获得最大宽度，即使它有可用空间来削减它

https://jsfiddle.net/Lwrpegqe/

正如您在jsfiddle中看到的那样，宽度太长，以下内容可能会更短

自动调整块大小的主要目的

Answer 1

将 display：inline-block; 添加到.message-container

Inline elements只占用内容的空间。除非另有说明，否则div始终为block element。

Answer 2

查看解决方案。

.message-container {
  resize: both;
  margin: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  color: #ffffff;
  border-radius: 20px;
  min-width: 100px;
  max-width: 400px;
  width: auto;
  height: auto;
  background-color: #80CBC4;
}

.message-value {
  resize: both;
  float: left;
  max-width: 380px;
  word-wrap: break-word;
  height: auto;
  display: inline;
}

.message-attribute {
  padding-left: 50px;
  width: 150px;
  display: inline;
  color: #607D8B;
}

https://jsfiddle.net/Lwrpegqe/2/

Answer 3

以百分比（％）给出宽度和高度。希望它对你有用。

. your-class{
widht:100%;height:100%;}

Answer 4

只需在引导程序4中使用w-100以适合容器元素的100％宽度

html，css自动调整大小/调整宽度以适应内容

4 个答案: