直列式，无包装元件容器的流体宽度

我有一些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

直列式，无包装元件容器的流体宽度

回答

相关问题