我知道如何让2个divs并排浮动,简单地浮动一个到左边,另一个到右边。

但是如何用3个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;

}

其他回答

三次跳水都向左飘。像在这里:

.first-div {
  width:370px;
  height:150px;
  float:left;
  background-color:pink;
}

.second-div {
  width:370px;
  height:150px;
  float:left;
  background-color:blue;
}

.third-div {
  width:370px;
  height:150px;
  float:left;
  background-color:purple;
}

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

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

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

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

<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>