调整 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

不要使用浮动。

试试这个：

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

这就是 inline-block 应该如何使用。

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

Answer 2

对于其中之一，您应该使用实际的 div 关闭标签而不是 span 来关闭您的 div。然后也关闭该清除 div