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

Question

我有一些要显示的 div 保存图像。 它们位于居中的容器内。 该容器的宽度可变，因此根据您的浏览器大小，您可以连续放置 3 或 4 个图像，然后它们才会流入下一行。我想让这些图像集中在容器元素中。我现在的问题是，这个容器元素始终是 100%，但内部图像 div 不会填充它。我需要内部 div 来扩展外部 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

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

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

您可能不希望 浮动：已离开 #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
}