css - 当 div 大于其父级时，如何将其扩展到其内容宽度？

Question

我正在尝试构建轮播 View 。为此，我有一个父 div，代表视口(viewport)，一个内容 div，包含要在 View 中显示的元素，还有一个未知数量的 div，代 TableView 中显示的元素。

<div id="viewport">
    <div id="content">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        ...
    </div>
</div>

父级和元素大小是事先已知的，但我希望内容大小随着元素的增长而增长。使用以下 CSS，元素按我的需要内联显示，但内容的宽度只会扩展到与父级宽度匹配为止。

#viewport {
    position: absolute;
    width: 400px;
    height: 200px;
    overflow: hidden;
}

#content {
    white-space: nowrap;
}

.item {
    display: inline-block;
    width: 200px;
    height: 200px;
}

如何使内容 div 扩展到与它的子元素大小相匹配？这是我所说的 JSFiddle:http://jsfiddle.net/j4LnB/ (红色边框显示内容的大小)。

Answer 1

您可以在#content-div 上使用display: inline-block;