如何使用CSS并排浮动3个div？

Question

如何使用CSS并排浮动3个div？我知道如何让2个div并排浮动，只需向左浮动一个，向右浮动另一个。但是如何使用3个div进行此操作还是应该只为此目的使用表格？

Answer 1

只要给它们一个宽度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>

Answer 2

现代方法是使用CSS flexbox，请参阅支持表。

.container {

  display: flex;

}

.container > div {

  flex: 1; /*grow*/

}

<div class="container">

  <div>Left div</div>

  <div>Middle div</div>  

  <div>Right div</div>

</div>

您也可以使用CSS网格，请参阅支持表。

.container {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr; /* fraction*/

}

<div class="container">

  <div>Left div</div>

  <div>Middle div</div>  

  <div>Right div</div>

</div>

Answer 3

它与你对两个div的方式相同，只是向左或向右浮动第三个div。

<style>

  .left{float:left; width:33%;}

</style>

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

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

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