如何使用CSS并排3个div
我知道如何使2个div并排浮动，只需将一个浮动到左边，另一个向右浮动。
但如何做到这一点与三个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>
现代的方式是使用CSS3 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>
这与两个div的做法是一样的，只是将第三个向左或向右移动。
<style> .left{float:left; width:33%;} </style> <div class="left">...</div> <div class="left">...</div> <div class="left">...</div>
把他们全部留下
确保宽度被指定，他们都可以适应他们的容器（或者另一个div或者窗口），否则他们将包装
<br style="clear: left;" />
有人贴在那里的代码，它做了伎俩！ 当我在closuresContainer DIV之前粘贴它时，它有助于清除所有后续的DIV与顶部并排创build的DIV重叠！
<div> <div class="left"></div> <div class="left"></div> ... ... <div class="left"></div> <!-- then magic trick comes here --> <br style="clear: left;" /> </div>
tadaa！ 🙂
将所有三个div浮动到左边。 像这样：
.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; }
我通常只是第一个向左，第二个向右。 第三个在它们之间自动alignment。
<div style="float: left;">Column 1</div> <div style="float: right;">Column 3</div> <div>Column 2</div>
<style> .left-column { float:left; width:30%; background-color:red; } .right-column { float:right; width:30%; background-color:green; } .center-column { margin:auto; width:30%; background-color:blue; } </style> <div id="container"> <section class="left-column">THIS IS COLUMN 1 LEFT</section> <section class="right-column">THIS IS COLUMN 3 RIGHT</section> <section class="center-column">THIS IS COLUMN 2 CENTER</section> </div>
这种方式的优点是你可以设置每个列宽度独立于另一个，只要你保持在100％以下，如果你使用3 x 30％，剩下的10％被拆分为5％的分隔符空间
你可以漂浮：左边的所有人，并设置宽度为33.333％
尝试添加“显示：块”的风格
<style> .left{ display: block; float:left; width:33%; } </style> <div class="left">...</div> <div class="left">...</div> <div class="left">...</div>
我更喜欢这种方法，漂浮在IE的旧版本中得不到很好的支持（真的？…）
.column-left{ position:absolute; left: 0px; width: 33.3%; background: red; } .column-right{position:absolute; left:66.6%; width: 33.3%; background: green; } .column-center{ position:absolute; left:33.3%; width: 33.3%; background: yellow; }
更新：当然，要使用这种技术，由于绝对定位，你需要将div放在一个容器中，并进行后处理来定义if的高度，如下所示：
jQuery(document).ready(function(){ jQuery('.main').height( Math.max ( jQuery('.column-left').height(), jQuery('.column-right').height(), jQuery('.column-center').height()) ); });
不是世界上最惊人的东西，但至less在老年人的IE浏览器上不会打破。
但它在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; }
我没有看到引导的答案，所以这是值得的：
<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找出百分比。 为了以防万一，我想清除这两个。
以下是我如何设法在<footer>元素内做类似的事情：
<div class="content-wrapper"> <div style="float:left"> <p>© 2012 - @DateTime.Now.Year @Localization.ClientName</p> </div> <div style="float:right"> <p>@Localization.DevelopedBy <a href="http://leniel.net" target="_blank">Leniel Macaferi</a></p> </div> <div style="text-align:center;"> <p>☎ (24) 3347-3110 | (24) 8119-1085 ✉ @Html.ActionLink(Localization.Contact, MVC.Home.ActionNames.Contact, MVC.Home.Name)</p> </div> </div>
CSS：
.content-wrapper { margin: 0 auto; max-width: 1216px; }
@Leniel这个方法很好，但是你需要为所有的浮动div添加宽度。 我会说让他们等宽或分配固定的宽度。 就像是
.content-wrapper > div { width:33.3%; }
您可以将类名分配给每个div，而不是添加inline style ，这不是一个好的做法。
请务必使用clearfix div或clear div来避免以下内容保留在这些div的下方。
你可以在这里find如何使用clearfix div的细节
