Плавающий родительский элемент расширяется только на содержимое плавающего элемента div

Question

У меня есть несколько изображений, которые я хочу показать.Они находятся в центрированном контейнере.Этот контейнер имеет переменную ширину, поэтому в зависимости от размера вашего браузера у вас будет 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
}