html - 如何创建每行自动分布的小 div 方 block ？

Question

我知道这很简单，但我现在似乎无法弄明白。

我的页面显示通过 div 分隔的信息集，样式看起来像“框”

我将动态显示不同数量的框(元素)，因此我希望页面以“文本环绕”样式水平显示每个框，其中每个框保持其尺寸但根据可用视口(viewport)均匀分布在每行中。 ..

我尝试以 Bootstrap 的方式执行此操作，但列会根据列的大小自动扩展/填充水平空间...w/c 是一种浪费...我的盒子是 50x50 像素，我只需要所有这些盒子均匀分布。

此外，我希望这些框居中.. 如果只有 3 个小框要显示，它们将位于中心，而不是最左边。

到目前为止我的代码

HTML

<div class="row">
<div class="col-xs-12">
<div class="terminal_entry"> <span class="" > blah  </span></div>
<div class="terminal_entry"> <span class="" > blah  </span></div>
<div class="terminal_entry"> <span class="" > blah  </span></div>
<div class="terminal_entry"> <span class="" > blah  </span></div>
<div class="terminal_entry"> <span class="" > blah  </span></div>
</div>                                                            
</div><!-- /.row -->

CSS

.terminal_entry {
    width: 50px;
    height: 50px;
    background-color: #cccccc;
    margin: 3px;
    padding: 5px;
    float: left;
}

Answer 1

正如@deebs所说，试试

display: inline-block

为您的元素设置父元素

text-align: center.

这是一个 JS Fiddle，显示了您想要的功能:http://jsfiddle.net/stroz/EB5bC/