内联非包装元素容器的流体宽度答案

【问题标题】：Fluid width for container of inline, non-wrapping elements内联非包装元素容器的流体宽度
【发布时间】：2012-10-17 08:42:47
【问题描述】：

我遇到了一点 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 的解决方案。

内联显示class="block" div，而不会将它们换行。
支持可变数量的class="inner-container" div，如上图，每行显示为自己的行。
使外部容器流畅"shrink-wrap" 以匹配其内容的宽度。

有什么建议吗？

【问题讨论】：

Here 你去吧。请注意，外部容器内容的宽度默认为 100%。

标签： html css width containers fluid

【解决方案1】：

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

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

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

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

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

【讨论】：

您可能还想制作外部容器内联块，以满足第三个要求。
非常感谢您的快速回复，但这并不是我需要的解决方案...当您的示例中的 class="block" div 的宽度太大时，它们会自动换行。我希望它们保持内联而不换行，无论它们的宽度或用户浏览器窗口的宽度如何。

【解决方案2】：

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

【讨论】：

感谢您的及时回复，但这不是我所需要的。我希望给定内部容器中的 class="block" div 保持内联，并排，不管它们有多少。当只有几个窄的 class="block" div 时，您的示例可以正常工作，但是如果这些 div 太多或如果它们的固定宽度设置得太高，这些 div 就会开始换行。