如何将div扩展为其内容宽度当它大于其父项？ [英] How to expand a div to its content width WHEN it is larger than its parent?

问题描述

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

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

父项和项目大小事先已知，但我希望内容大小随项目增长。使用以下CSS，这些项目会按照我的需要内联显示，但内容的宽度只会扩展到与其父宽度相匹配。

$ b

  #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/ （红色边框显示内容的大小）。

解决方案

您可以使用 display：inline-block; 在＃content-div

上

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

解决方案

You can use display: inline-block; on the #content-div

这篇关于如何将div扩展为其内容宽度当它大于其父项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！