内嵌非包裹元件容器的流体宽度

Question

我有一点CSS麻烦。

我有一些div元素，如下例所示。有一个动态数量的class =“block”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的解决方案。

1. 以内联显示class="block" div，不将它们换行到新行。
2. 支持可变数量的class="inner-container" div，如上所示，每个div都显示为自己的行。
3. 让外部容器流畅"shrink-wrap"以匹配其内容的宽度。

有什么建议吗？

Answer 1

不是100％确定这是否是您正在寻找的，但它可能是一个开始：

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

通过将每个block元素设置为display: inline-block和white-space: nowrap，它应该允许元素彼此并排放置，但如果内容长于可用空间（而block将移至新行）。

每个inner-container都会显示在自己的行上（display: block是div的默认行为）。

将外部容器设置为display: inline-block将使其“收缩包装”以适合其内容。

Answer 2

Here是一个示例，其中块是内联的，内部容器具有固定的宽度，外部容器正在缩小以适应。