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

我想显示一些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>

有人有什么想法吗？如果你不明白我的意思，请询问，以便我能更详细地描述它。提前谢谢

---

您可以切换到使用

显示：内联块

而不是

项

上的

浮动：左

，然后在

上的
文本对齐：居中
以居中：

请参见：-（请确保尝试调整窗口大小）

您可能不想在
#team
上使用
float:left
，但我不确定您在做什么

#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
}

这对我来说并不明显。你能试着改进这个问题吗？当然，是这样的。主容器分区团队是否使用padding:0 auto而不是margin:o auto将其居中？抱歉，已更正。“padding:20px0；”并没有什么区别。它由居中元素中的beein居中。我不能把它放在中间，因为它的宽度总是100%。这个“包装器”（#团队）的中心不包括在这个代码中。伙计，你肯定把这个代码踢出了狗屎，这真是太棒了。可悲的是，这不是我想要的100%。我更希望这样，物品容器分区目前为250px，连续3个，这样#团队的宽度为750px。这样我就可以把它居中了。现在的问题是，最后两个元素，例如，应该是左边，而不是中间。对不起，我可能没有说清楚。你知道我怎么会有这种行为吗？我很高兴。：）谢谢你，我不太明白你在找什么。您需要一个水平居中的容器，最大宽度为~1000px（适合4幅图像），最小宽度为250px（适合一幅图像）。里面的物品应该左对齐。是吗？好吧，我加了一张我想要的图片。我希望这比我的解释更容易理解。谢谢，因为似乎没有人有其他的解决方案，我同意你的，这是一个非常好的解决方案，在大多数情况下都非常有效。我现在决定使用一点javascript来修复它。再次感谢。
#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
}