div横向排列

 

在网页布局中，常常有几个div横向排列的需求，此时，可以采用浮动的方式：

1、左右浮动：

<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS：

.main{width:100px;height:100px;}
.left{
    width:30px;height:100px;background: red;margin-right:15px;
    display: block;position: relative;float: left;
}
.right{
    float: right; background: green; height:100px;width:20px;display: block;
}

结果为：

2、全部左浮动

CSS：

.main{width:100px;height:100px;}
.left{
    width:30px;height:100px;background: red;margin-right:15px;
    display: block;position: relative;float: left;
}
.right{
    float:left; background: green; height:100px;width:20px;display: block;
}

结果为：

可以看出：如果全部左浮动的话，那么div会按照一定的先后顺序依次横向排列，他们之间的间隔是我们自己设定的，

而用float：right之后，则是两个div分别浮动在他们父级区域的两侧，之间的间隔就为父级区域的宽度减去两个div

的宽度。