Адаптация ширины div к его содержимому, содержащему несколько div

Question

У меня небольшая проблема.

На самом деле я пытаюсь адаптировать ширину «контента» к нескольким div в нем.На самом деле, я пытаюсь адаптировать этот код для нескольких экранов, я не могу указать специальную ширину.Встроенный блок не работает вообще.Я не знаю почему.Я бы центрировал содержимое div в середине моей страницы, а центр классов - в середине содержимого div.Действительно идеальный центр.

Есть идея?

HTML

<div id="content">
<div class="badges"></div>    
<div class="badges"></div>    
<div class="badges"></div>    
<div class="badges"></div>    
<div class="badges"></div>    
<div class="badges"></div>    
<div style="clear:both;"></div>       
</div>

CSS

#content{
    display:inline-block;
}

.badges{
    width:220px;
    height:380px;
    float:left;
    background:red;
    margin:10px;
}

Спасибо, Бастьен

Answer 1

Не используйте float.

Попробуйте это:

#content {text-align: center;}
.badges {
    width: 220px;
    height: 380px;
    background: red;
    margin: 10px;
    display: inline-block;
}

Вот как следует использовать inline-block.

Также исправьте вашу разметку, как говорит Кай Цин.

Answer 2

для одного вы должны закрыть свои div с фактическими тегами закрытия div, а не span.Затем закройте этот очищающий div