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

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

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

但它在Chrome上能正常工作吗?

浮动每个div并设置为清除;都是针对行。不需要设置宽度，如果你不想。适用于Chrome 41,Firefox 37, IE 11

点击获取JS小提琴

HTML

<div class="stack">
    <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
    </div>
        <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
                    <div class="col">
            Three
        </div>
    </div>
</div>

CSS

.stack .row { 
clear:both;

}
.stack .row  .col    {
    float:left;
      border:1px solid;

}

我没有看到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算出百分比。 以防万一，我想把两个都清除掉。

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

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

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

只要给它们一个宽度和float: left;，这里有一个例子:

<div style="width: 500px;">
 <div style="float: left; width: 200px;">Left Stuff</div>
 <div style="float: left; width: 100px;">Middle Stuff</div>
 <div style="float: left; width: 200px;">Right Stuff</div>
 <br style="clear: left;" />
</div>

display: table;如果文本需要显示，如果在同一行

换句话说;如果在每个<div>文本的垂直对齐需要是相同的，一个可以尝试现代复古回到过去的有点有争议的表格样式:

.container {display: table;}
div   {display: table-cell;}

事实证明，这对于在Pandoc中格式化csl风格的引用非常有用，如下所示:

div.csl-bib-body {}
div.csl-entry {
    margin-top: 1rem;
    display: table;
    }
div.csl-left-margin {
    display: table-cell;
    }
div.csl-right-inline {
    padding-left: 1ex;
    display: table-cell;
    }

引文编号div和引文数据div现在显示在完全相同的高度。