如何將一組相同寬度的盒子均勻地分布在自舉流體容器內？

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>