html - 内联非包装元素容器的流体宽度

Question

我遇到了一点 CSS 问题。

我有一些 div 元素的结构类似于以下示例。有动态数量的 class="block" 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，如上面的，每个显示为自己的行。
3. 让外部容器流畅"shrink-wrap"地匹配其内容物的宽度。

有什么建议么？

Answer 1

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

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

通过将每个block元素设置为display: inline-blockand white-space: nowrap，它应该允许元素并排放置，但如果内容长于可用空间，则不会换行（而是block将移动到新行）。

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

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

Answer 2

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