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

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

其他回答

我没有看到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="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</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;
}