浮动父级仅由内容浮动div扩展

Question

我想要显示一些divs holidng图像。 它们位于中心容器内。 此容器具有可变宽度，因此根据您的浏览器大小，您在流入下一行之前连续有3或4个图像。我想让图像集中在容器中。我现在的问题是，这个容器元素总是100％，但内部图像div不填充它。我需要内部div来扩展out div，所以它只有3或4个图像及其边缘的宽度。

我的HTML是：

<div id='team'>
  <div class='item-container'>
    <div class='item'>
      <img src='small.jpg' alt='' />
    </div>
  </div>

  <div class='item-container'>
    <div class='item'>
      <img src='small.jpg' alt='' />
    </div>
  </div>
</div>

我的css是：

#team{
  margin: 20px 0px;
  padding: 20px 0;
  position: relative;
  float: left;
}
#team .item-container{
  position: relative;   
  float: left;
  width: 230px;
  height: 180px;    
  margin: 2%;
}

任何想法？如果你不理解我的意思，请问我可以更详细地描述它。提前谢谢。

Answer 1

您可以在display: inline-block上切换为使用float: left而不是.item，然后text-align: center上的#team转到中心位置：

请参阅： http://jsfiddle.net/gGc76/8/ - （请务必尝试调整窗口大小）

您可能不希望在float: left上#team，但我不确定您在做什么。

#team {
    margin: 20px 0;
    padding: 20px 0;

    position: relative;
    float: left;
    background: #ccc;

    text-align: center
}
#team .item-container {
    vertical-align: top;
    display: inline-block;
    /* if you need ie7 support */
    *display: inline;
    zoom: 1;

    position: relative;   
    width: 230px;
    height: 180px;    
    margin: 2%;
    background: #eee
}