如何將div放在另一個div內時變成最小寬度？

我有兩個DIV。如何將div放在另一個div內時變成最小寬度？

股利A爲100％的寬度
股利B是股利A的內部，它不具有寬度設置並具有在其內部文本幾句

我試圖設置在底邊框爲股利乙所以文字出現下劃線。但是，Div B似乎擴展了Div A的全部寬度。有什麼辦法可以讓Div B只是文本的寬度。

希望我的問題清楚。

謝謝，

來源

2011-04-29 Markiko

你不能用一個'span'而不是'div'任何理由？ – 2011-04-29 02:47:27

Div的是塊級元素，這意味着它們總是擴展到他們的容器的寬度的100％。

如果您想在文本週圍放置邊框，請將其包裝在內聯元素中，例如跨度，然後將邊框應用於該跨度。

另外，對有問題的DIV使用display:inline，但沒什麼用一個div用於該目的

來源

2011-04-29 02:45:47 brad

很好的答案。如果你需要填充等，但你需要使用display：inline-block; – Marty 2011-04-29 02:48:38

是真實的，但是在這個問題中沒有提到這個要求，所以爲了簡潔和簡單起見我沒有提及它。 – brad 2011-04-29 02:54:28

大聲笑，我整天都這樣做了，因爲不夠成熟而不斷磨礪：/ – Marty 2011-04-29 02:56:50

沒有一點添加float: left到事業部B的div的寬度將隨後由內容的寬度確定內;或換句話說，div將「收縮包裝」到其內容。

爲了事業部一個contain事業部B正常，你還應該添加overflow: hidden到事業部A.

另一種選擇是在股利B.但是，在這種情況下使用display: inline-block，float比較容易，因爲display: inline-block需要一些幫助在IE7中工作。

參見：http://jsfiddle.net/Sfg8Y/

來源

2011-04-29 02:45:56 thirtydot

'浮動'看起來有點像跳過鐵環不？ 'inline'元素完全不需要額外的標記或css聲明。 – brad 2011-04-29 02:51:34

@brad：'inline'元素不允許添加'margin-top' /'margin-bottom'（等等）。爲了解決這個問題，你需要使用'display：inline-block'。我的答案涵蓋了爲什麼使用浮點數比使用'display：inline-block'更容易（對於IE7兼容性）。即使它只使用'display：inline-block; *顯示：內聯;縮放：1'使其在IE7中工作。當然，他也可以用''這個符號，這（根據你的答案）是最好的解決方案。 – thirtydot 2011-04-29 02:56:02

<div class="mydiv">content</div> 

div.mydiv 
{ 
    display: inline-block; 
    padding-bottom: 1px; 
    border-bottom: 1px solid #000; 
}

來源

2011-04-29 02:49:15 Marty

如何將div放在另一個div內時變成最小寬度？

回答

相關問題