Question

我正在尝试建立旋转木马视图。为此，我有一个父div，代表视口，一个内容div，持有要在视图中显示的项目，以及一个未知数量的div，代表视图中显示的项目。

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

Answer 2

在视口div上使用min-width代替width应该可以解决问题。这允许内容div扩展到完整的子宽度。

#viewport {
   position: absolute;
   min-width: 400px;
   height: 200px;

http://jsfiddle.net/j4LnB/1/

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

2 个答案: