div横向排列
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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
的宽度。