html - 使 div 的宽度适应包含多个 div 的内容

Question

我有一个小问题。

实际上我正在尝试使“内容”的宽度适应其中的多个 div。事实上，我正在尝试使这段代码适应多个屏幕，我不能指定一个特殊的宽度。内联 block 根本不起作用。我不知道为什么。我会将 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。

另外，按照 Kai Qing 的说法更正您的标记。