浮動父對象僅由內容浮動div擴展

Question

我有一些要顯示的divs holidng圖像。 它們位於居中的容器中。 此容器的寬度可變，因此，根據您的瀏覽器大小，在連續流入下一行之前，您將連續擁有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

您可以切換到使用display: inline-block而不是float: left在.item上.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
}