创建两列或三列基于浮动的布局
2017-08-26 本文已影响0人
xiaoguo16
在设计网页布局时，经常需要设置两列或者三列的布局，这种设置最为简便的就是利用浮动。
两列布局
<style>
.wrapper{
width:960px;
margin: 0 auto;
}
.content .secondary{
width:200px;
float:left;
}
.content .primary{
float:right;
width:calc(100% - 210px);
}
.content{
overflow:auto;
}
</style>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="content">
<div class="primary"></div>
<div class="secondary"></div>
</div>
<div class="footer"></div>
</div>
</body>
代码详解：
- html
首先需要先把html的布局规划好，最外层的wrapper包含所有的div，此处我们设置一个固定宽度，然后在wrapper里面设置页头，内容，页脚。在内容中设置两个列primary和secondary。primary为主内容，secondary为侧边栏。 - css
主要就是给primary和secondary设置float属性，此处我给secondary设置的固定宽度，primary设置的计算后的宽度，中间留了一部分宽度作为两者的边距。
由于此处使用了浮动，所以需要清除浮动，方法为给它们的父元素content设置overflow属性为auto或者hidden。也可以给footer设置clear属性为both，清除浮动。
三列布局：
<style>
.wrapper{
width:960px;
margin: 0 auto;
}
.content .secondary{
width:200px;
float:left;
}
.content .primary{
float:right;
width:calc(100% - 210px);
}
.content{
overflow:auto;
}
.content .primary .primary{
float: left;
width: calc(100% - 100px);
}
.content .primary .secondary{
float: right;
width: 80px;
}
</style>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="content">
<div class="primary">
<div class="primary"></div>
<div class="secondary"></div>
</div>
<div class="secondary"></div>
</div>
<div class="footer"></div>
</div>
</body>
三列布局与两列布局原理是相同的，只是在primary的元素框中再加入两个div，并且两个div分别左右浮动。
