如何根據里面的文字增加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 。

這里的例子

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

Answer 3

只需添加display:inline; 。 您還可以刪除最小寬度屬性，否則如果文本較小，您仍然會有這個間隙。

Answer 4

塊元素（ div的默認顯示類型）將嘗試占用容器的最大水平空間。 想象一下隱含的width:100%每當你看到它們時都是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>

我想你會發現這會給你預期的效果。 順便說一句，這是一個通用的解決方案 - 但是如果你選擇一個大於50%的min-width ，你將確保兩個類型inline-block兄弟對於一條線來說太寬。 如果你這樣做，那么你可以省去標記中的額外div 。