如何根據裏面的文字增加div寬度？

我有一個用戶在其中輸入文本的div。但是我想根據它的文本增加它的寬度，直到屏幕的最大值爲50％。我的CSS代碼：如何根據裏面的文字增加div寬度？

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

結果： enter image description here

還有的「555」的消息後，有很大的空間，我想只有當用戶輸入，比如一些文本這個尺寸：

enter image description here

那麼，如何根據文字大小不同地增加div的寬度？

來源

2014-09-21 Edie Johnny

將最小寬度降低爲10em，並使用display：inline-block; – dandavis 2014-09-21 08:45:20

有很多方法可以做到這一點，但恕我直言，最乾淨的是以下內容。您的問題是，這些框是「貪婪」，並會嘗試擴大到可用寬度。

爲了防止這種情況，您可以：

使其「浮動：左;」
但也「清楚：離開」以防止額外的「左浮動」元素使用右側的可用空間。

的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

LiveWeave screenshot

來源

2014-09-21 09:26:32 Pivert

使用float時，必須清除每個塊底部或每個下一個元素上的浮點數，請看下面的示例：http://liveweave.com/KqVGPF您會看到添加的段落包裝浮動元素。這種方法會影響可能導致麻煩的正常流量。 – 2014-09-21 16:06:57

如果我聲明float，是否存在問題：對嗎？因爲用戶的消息將在右邊，而其他的在左邊，比如Facebook，Whatsapp等等...... – 2014-09-21 16:08:40

如果頁面上有其他東西，float肯定會讓你陷入困境。除了某些特殊情況（在圖像周圍纏繞文本），不應使用浮動。我修改了這個答案發布的liveweave，告訴你爲什麼：http://liveweave.com/8rWIpf – 2014-09-21 22:42:13

嘗試更改display div的類型爲table。

Example Here

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

來源

2014-09-21 07:55:31

只需添加display:inline;。您也可以刪除最小寬度屬性，否則如果文字較小，您仍然會有這種差距。

來源

2014-09-21 08:05:06

做內聯顯示尊重最小寬度？ – dandavis 2014-09-21 08:46:04

塊元素（div的默認顯示類型）將嘗試佔用容器的最大水平空間。想象一下，每當你看到它們時，都會隱含width:100%。 inline-block將創建塊級元素，其中下一個元素將嘗試水平鄰近渲染（假設有足夠的空間）。這是您要使用（display: table將在這個解決方案工作，以及什麼，但它有自己的特質我躲得

所以您的解決方案需要三個部分：

首先，你需要指定行會不會比現有面積的50％的情況下你會做這與外框：。

.frame { 
    max-width:50%; 
}

接下來，自己應該在每次在同一時間內給定空間整行（S）的消息，因此我們將在每封郵件的周圍使用未標記的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。

來源

2014-09-21 09:27:10

如何根據裏面的文字增加div寬度？

回答

相關問題