如何将一组相同宽度的盒子均匀地分布在自举流体容器内？

Question

如何在流体容器内均匀分布一组相同宽度的盒子？

我有以下内容：

<div class="fluid-container">
  <span>some text</span>
  <span>some text2</span>
  ...
  <span>some textN</span>
</div>

我想获得一个很好的均匀间隔框的结果，其中每个包含给定文本的粉红色框在蓝色液体容器内部始终具有相同的宽度：

我尝试在其内部设置盒子，但随后在下一行中将它们一个接一个地放置，而不是最佳地使用横向空间：

如果我没有在文本中使用任何内容（例如我使用的跨度），那么流体容器会发挥作用，但文本间距不均匀（在这种情况下，黄色框是没有任何标签包裹的文本）：

我应该使用什么类/ css代码来组织和包装文本，以便得到相同的宽度框？ 装箱数未知。

Answer 1

http://getbootstrap.com/css/#grid

Bootstrap包括一个响应式，可移动的第一流体网格系统，该系统可随着设备或视口尺寸的增加而适当地扩展至12列。 它包括用于轻松布局选项的预定义类，以及用于生成更多语义布局的强大混合器。

<div class="row">
  <div class="col-md-4">text</div>
  <div class="col-md-4">text</div>
  <div class="col-md-4">text</div>
</div>

Answer 2

我不确定您为什么要专门使用“流体网格”。 除非您不希望它在移动时折叠成一排。

<div class="row">
  <div class="col-xs-6 col-md-4">col 1</div>
  <div class="col-xs-6 col-md-4">col 2</div>
  <div class="col-xs-6 col-md-4">.col 3</div>
</div>

http://getbootstrap.com/css/#grid-example-fluid

Answer 3

如果要在没有任何框架的情况下执行此操作，则可以使用Flexbox

 .fluid-container { display: flex; background: #5B9BD5; flex-wrap: wrap; padding: 20px; } span { flex: 0 0 calc(33.33% - 20px); background: #F8CBAD; min-height: 50px; margin: 10px; } @media(max-width: 768px) { span { flex: 0 0 calc(100% - 20px); } } 

 <div class="fluid-container"> <span>some text</span><span>some text2</span><span>some textN</span><span>some text</span><span>some text2</span><span>some textN</span><span>some text</span><span>some text2</span><span>some textN</span><span>some text</span><span>some text2</span><span>some textN</span> </div>