我通常只是把第一个浮动到左边，第二个浮动到右边。第三个自动在它们之间对齐。

<div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>

我没有看到bootstrap的答案，所以不管怎样

<div class="col-xs-4">Left Div</div>
<div class="col-xs-4">Middle Div</div>
<div class="col-xs-4">Right Div</div>
<br style="clear: both;" />

让Bootstrap算出百分比。 以防万一，我想把两个都清除掉。

尝试在样式中添加“display: block”

<style>
   .left{
          display: block;
          float:left; 
          width:33%;
    }
</style>


<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>

这与你为两个div所做的方式相同，只是将第三个div浮动到左或右。

<style>
  .left{float:left; width:33%;}
</style>

<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>

@Leniel这个方法很好，但是你需要为所有浮动div添加宽度。我会说，让它们宽度相等或分配固定宽度。类似的

.content-wrapper > div { width:33.3%; }

您可以为每个div分配类名，而不是添加内联样式，这不是一个好的实践。

请确保使用clearfix div或clear div，以避免下面的内容仍然低于这些div。

你可以在这里找到如何使用clearfix div的详细信息

现代的方法是使用CSS flexbox，参见支持表。

.container { 显示:flex; ｝ .container > div { flex: 1;/ * * / ｝ < div class = "容器" > < div >左div < / div > 中产div < div > < / div > < div >正确的div < / div > < / div >

也可以使用CSS网格，参见支持表格。

.container { 显示:网格; Grid-template-columns: 1fr 1fr 1fr;/ * * / ｝ < div class = "容器" > < div >左div < / div > 中产div < div > < / div > < div >正确的div < / div > < / div >