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

Question

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

我知道如何让2个div并排浮动，只需向左浮动一个，向右浮动另一个。

但是如何使用3个div进行此操作还是应该只为此目的使用表格？

Answer 1

只要给它们一个宽度float: left;，这是一个例子：<div style="width: 500px;">&nbsp;<div style="float: left; width: 200px;">Left Stuff</div>&nbsp;<div style="float: left; width: 100px;">Middle Stuff</div>&nbsp;<div style="float: left; width: 200px;">Right Stuff</div>&nbsp;<br style="clear: left;" /></div>

Answer 2

现代方法是使用CSS flexbox，请参阅支持表。.container {&nbsp; display: flex;}.container > div {&nbsp; flex: 1; /*grow*/}<div class="container">&nbsp; <div>Left div</div>&nbsp; <div>Middle div</div>&nbsp;&nbsp;&nbsp; <div>Right div</div></div>您也可以使用CSS网格，请参阅支持表。.container {&nbsp; display: grid;&nbsp; grid-template-columns: 1fr 1fr 1fr; /* fraction*/}<div class="container">&nbsp; <div>Left div</div>&nbsp; <div>Middle div</div>&nbsp;&nbsp;&nbsp; <div>Right div</div></div>

Answer 3

它与你对两个div的方式相同，只是向左或向右浮动第三个div。<style>&nbsp; .left{float:left; width:33%;}</style><div class="left">...</div><div class="left">...</div><div class="left">...</div>