Fluid width for container of inline, non

I'm having a little CSS trouble.

I have some div elements structured like the following example. There are a dynamic number of class="block" divs, each with a fixed width:

<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>

My goal is to find a CSS-based solution that will.

Display the class="block" divs inline, without them wrapping to new lines.

Support a variable number of class="inner-container" divs like the one above, each displayed as its own line.

Have the outer container fluidly "shrink-wrap" to match the width of its contents.

Any suggestions?

---

Not 100% sure if this is what you're looking for, but it might be a start:

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

By setting each block element to display: inline-block and white-space: nowrap , it should allow the elements to sit alongside each other, but not wrap to a new line if the content is longer than the available space (instead the block will move to a new line).

Each inner-container will display on its own line ( display: block is default behaviour for a div ).

Setting the outer container to display: inline-block will cause it to 'shrink wrap' to fit its content.

---

下面是一个示例，其中内嵌块，内容器具有固定宽度，并且外容器正在收缩以适合。

链接地址: http://www.djcxy.com/p/81360.html

上一篇: CSS使绝对子宽度与相对父宽度无关

下一篇: 内联，非外壳容器的流体宽度