直列式，無包裝元件容器的流體寬度

我有一些div元素結構像下面的例子。有一個動態數類=「塊」的div，每個具有一個固定的寬度：

<div class="outer-container"> 
    <div class="inner-container"> 
     <div class="block">text</div> 
     <div class="block">text</div> 
     <div class="block">text</div> 
     <!-- More "block" divs here --> 
    </div> 
</div>

我的目標是找到一種基於CSS的解決方案，將。

顯示內嵌的class="block" div，沒有它們換行。
支持像上面那樣的可變數量的class="inner-container" div，每個顯示爲自己的行。
使外部容器流暢地"shrink-wrap"以匹配其內容的寬度。

有什麼建議嗎？

來源

2012-10-17 user1752396

[Here]（http://jsfiddle.net/MNrkk）你走了。請注意，外部容器的內容的寬度默認爲100％。 –

不是100％肯定，如果這是你在尋找什麼，但它可能是一個開始：

http://jsfiddle.net/r4dEX/3/

通過各block元素設置爲display: inline-block和white-space: nowrap，它應該允許的元素如果內容長於可用空間（而不是block將移動到新行），則不會換行到新行。

每個inner-container將顯示在其自己的行（display: block是div的默認行爲）。

將外部容器設置爲display: inline-block將導致它「收縮包裝」以適應其內容。

來源

2012-10-17 08:50:35 MassivePenguin

您可能還想製作外容器內聯塊，以滿足第三個要求。 –

是的，我只是在編輯我的示例;） – MassivePenguin

非常感謝您的快速回復，但這不是我需要的解決方案...當您的示例包裝中的class =「block」div寬度太大大。我希望它們保持內聯而不打包，無論它們的寬度或用戶瀏覽器窗口的寬度如何。 – user1752396

Here是一個示例，其中塊是內嵌的，內部容器具有固定寬度，並且外部容器正在收縮以適應。

來源

2012-10-17 08:53:10

非常及時的答覆，謝謝你，但這不是我所需要的。我想讓class =「block」div在一個給定的內部容器內保持內聯，並排，而不管它們有多少個。當只有少數幾個狹窄的class =「block」div時，您的示例工作正常，但如果div太多或固定寬度設置得太高，則這些div會開始打包。 – user1752396

直列式，無包裝元件容器的流體寬度

回答

相關問題