我知道如何让2个divs并排浮动,简单地浮动一个到左边,另一个到右边。
但是如何用3个div来做这个,或者我应该只用表来做这个目的吗?
我知道如何让2个divs并排浮动,简单地浮动一个到左边,另一个到右边。
但是如何用3个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())
);
});
这不是世界上最神奇的东西,但至少不会砸到老的ie。
其他回答
你可以为它们设置float: left,并将宽度设置为33.333%
把它们都飘到左边
确保所指定的宽度都能适合它们的容器(无论是另一个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())
);
});
这不是世界上最神奇的东西,但至少不会砸到老的ie。
我没有看到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算出百分比。 以防万一,我想把两个都清除掉。
尝试在样式中添加“display: block”
<style>
.left{
display: block;
float:left;
width:33%;
}
</style>
<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>