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. 让外部容器流畅地“收缩包装”以匹配其内容物的宽度。

有什么建议吗？

Answer 1

不能 100% 确定这是否是您要找的东西，但这可能是一个开始:

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

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

每个 inner-container 将显示在自己的行上(display: block 是 div 的默认行为)。

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