4

I'm trying to build a carousel view. For that I have a parent div, representing the viewport, a content div, holding the items to be shown in the view, and an unknown number of divs, representing the items shown in the view.

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

The parent and the items size is known beforehand but I want the content size grow with the items. With the following CSS, the items are displayed inline as I want, but the content's width will expand only until it matches its parent width.

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

#content {
    white-space: nowrap;
}

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

How can I make the content div expand until it matches its children size? Here is a JSFiddle for what I'm saying: http://jsfiddle.net/j4LnB/ (the red border is showing the content's size).

4

2 回答 2

4

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

于 2013-04-18T22:44:23.737 回答
2

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

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

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

于 2013-04-18T22:45:12.467 回答