html - 如何水平并排对齐div？

Question

我有 3 个 div 需要并排显示并均匀分布在父 div 宽度(设置为窗口的 100%)内。最好的方法是什么？

请参阅下面的示例，它只是浮​​动 3 个 div(只是将它们一个接一个地放置在左侧，这不是我需要的)。

PS:选项列表是动态的，即我可能有超过 3 个 div，因此理想情况下解决方案应该考虑到这一点。谢谢! :)

PS 2:我正在使用 bootstrap，所以如果有使用 bootstrap 执行此操作的好方法，我完全赞成。

.row {
  width: 100%;
  background-color: #DDD;
}

.option {
  border: 1px solid #BBB;
  float: left;
  padding: 10px;
}

<div class="row">

    <div class="option">
        Box A
    </div>
    <div class="option">
        Box B
    </div>
    <div class="option">
        Box C
    </div>

</div>

Answer 1

你可以使用 flex，参见 fiddle https://jsfiddle.net/Lddyn573/5/

.row {
  width: 100%;
  display: flex;
  justify-content: space-around;
  background-color: #DDD;
}

.option {
  border: 1px solid #BBB;
  padding: 10px;
}