我知道如何使两个div并排浮动,只需将一个浮动到左边,另一个浮动到右边。
但如何在3个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>
现代的方法是使用[CSS flexbox][1],见[支持表][2]。
<!--开始片段。 js hide: false -->
.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 grid][3],参见[支持表格][4]。
<!--开始片段。 js hide: false console.true babel: true true babel.false --> -- begin snippet: js hide: false console: true false -->
.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>
[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox [2]: https://caniuse.com/#feat=flexbox [3]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout [4]: https://caniuse.com/#feat=css-grid
<br style="clear: left;" />
有人在上面发的那段代码,它做到了!!! 当我在关闭Container DIV之前粘贴它时,它帮助清除了所有后续的DIVs与我在顶部并排创建的DIVs之间的重叠!
<div>
<div class="left"></div>
<div class="left"></div>
...
...
<div class="left"></div>
<!-- then magic trick comes here -->
<br style="clear: left;" />
</div>
哒哒)
把三个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;
}
<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×30%,那么剩下的10%就会被分割成5%的列间分隔空间。
我更喜欢这种方法,老版本的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; }
更新了 。 当然,要使用这种技术,由于绝对定位,你需要将容器上的divs包围起来,并做一个后处理来定义if的高度,类似这样。
jQuery(document).ready(function(){
jQuery('.main').height( Math.max (
jQuery('.column-left').height(),
jQuery('.column-right').height(),
jQuery('.column-center').height())
);
});
虽然不是世界上最神奇的东西,但至少不会在旧的IE上坏掉。
浮动每个div并为行设置clear;两者。 如果你不想设置宽度,就不需要设置。 适用于Chrome 41,Firefox 37,IE 11。
[点击查看JS Fiddle]()。
<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>
.stack .row {
clear:both;
}
.stack .row .col {
float:left;
border:1px solid;
}
@Leniel这个方法很好,但是你需要给所有的浮动div增加宽度's。 我想说的是,让它们的宽度相等或者分配固定的宽度。 比如说
.content-wrapper > div { width:33.3%; }
你可以为每个div分配类名,而不是添加inline style
,这不是一个好的做法。
一定要使用clearfix div或clear div,以避免下面的内容仍然低于这些div'的。
你可以找到如何使用clearfix div的细节[这里][1] 。
[1]: http://blog.webcomers.com/what-is-clearfix-before-and-clearfix-after