如何根据里面的文字增加div宽度呢？

Question

我有一个用户输入文本的div。但是我想根据它的文字增加它的宽度，直到最多50％的屏幕。我的CSS代码：

.messages {
   max-width:50%;
   min-width:150px;
   background: #ffeec0;
   padding:2px;
   margin:3px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
   border:1px solid #ffdd7c;
}

结果：

“555”消息后面有很多空格，只有当用户输入一些文字时我才想要这个尺寸：

那么，如何根据文本大小增加div的宽度？

Answer 1

有很多方法可以达到这个目的，但恕我直言最清洁的是以下几点。 你的问题是盒子是“贪婪的”，并试图扩展到可用的宽度。

为防止这种情况，您可以：

• 让它“浮动：离开;”
• 但也“清楚：离开;”防止额外的“左浮动”元素使用右侧的可用空间。

CSS成为：

.messages {
   max-width:50%;
   min-width:150px;
   background: #ffeec0;
   padding:2px;
   margin:3px;
   border-radius: 2px;
   border:1px solid #ffdd7c;
   float:  left;
   clear: left;
}

我在Liveweave上提供了完整的代码和其他解释（鼠标悬停）：http://liveweave.com/DFCZFj

Answer 2

尝试将div的display类型更改为table。

<强> Example Here

.messages {
   display: table;
   max-width: 50%;
   min-width: 150px;
   /* other declarations omitted due to brevity */
}

Answer 3

只需添加display:inline;即可。你也可以删除min width属性，否则如果文本较小，你仍然会有这个差距。

Answer 4

块元素（div的默认显示类型）将尝试占用容器的最大水平空间。想象一下，只要你看到它们就会隐含width:100%。 inline-block将创建块级元素，其中下一个元素将尝试水平相邻呈现（假设有足够的空间）。这就是你想要使用的东西（display: table也可以在这个解决方案中使用，但它有自己的特性。我避免使用它们。

所以你的解决方案需要三个部分：

首先，您需要指定行不大于可用区域的50％。您将使用外框执行此操作：

.frame {
  max-width:50%;
}

接下来，消息本身应该每次都为整行提供空间。因此，我们会在每条消息周围使用未修饰的div标记。

最后，您将display: inline-block用于最里面的messages元素。由于他们是父母标签中唯一的孩子，因此您不必担心元素彼此缠绕在一起。通过使用内联块，宽度得到尊重，这为我们提供了应用背景颜色的好地方。

.messages {
  display: inline-block;
  min-width: 150px;
  background: #ffeec0;
  padding:2px;
  margin:3px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  border:1px solid #ffdd7c;  
}

作为参考，可以预期您的标记将如下所示：

 <div class="frame">
  <div><div class="messages">2014</div></div>
  <div><div class="messages">2014</div></div>
  <div><div class="messages">
   2014-09-20 17:46:41 minhavidaemquotes:555
  </div></div>
  <div><div class="messages">
   2014-09-20 17:46:41 minhavidaemquotes:555 this is some extra
   text
  </div></div>
 </div>

我认为你会发现这会给你预期的效果。顺便说一下，这是一个通用的解决方案 - 但是如果你选择一个大于min-width的{​​{1}}，你将确保50%类型的两个兄弟姐妹的范围太宽线。如果这样做，那么您可以省去标记中的额外inline-block。