参考文档 https://www.cnblogs.com/jizhijunboke/p/4990091.html
一、两栏布局(左定宽,右自动)
1. float + margin
即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度。
举例:
HTML代码:
- <div class="wrap">
- <div class="wrap_left">
- 我是左栏
- </div>
- <div class="wrap_right">
- 我是右栏
- </div>
- </div>
-
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap{
- margin: 10px;
- }
- .wrap_left{
- float: left;
- width: 200px;
- }
- .wrap_right{
- margin-left: 220px;
- }
2.position + margin
即在父标签设置position属性为relative;子标签中定宽元素设置position属性为absolute;自适应元素设置margin属性,margin-left>=定宽元素宽度。
举例:
HTML代码- <div class="wrap">
- <div class="wrap_left">
- 我是左栏
- </div>
- <div class="wrap_right">
- 我是右栏
- </div>
- </div>
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap{
- margin: 10px;
- position: relative;
- }
- .wrap_left{
- position: absolute;
- width: 200px;
- }
- .wrap_right{
- margin-left: 220px;
- }
3.float + 负margin即给自适应宽度元素定义一个父标签,并设置float属性为left;width为100%;自适应宽度元素设置margin,margin-left应>=定宽元素宽度;固定宽度元素设置margin-left属性为负值:-100%;
除此之外应注意HTML结构中应先写自适应元素,再写固定宽度元素。HTML代码
- <div class="wrap">
- <div class="wrap_right">
- 我是右栏
- </div>
- </div>
- <div class="wrap_left">
- 我是左栏
- </div>
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap{
- float: left;
- width: 100%;
- }
- .wrap .wrap_right{
- margin-left: 220px;
- }
- .wrap_left{
- float: left;
- width: 200px;
- margin-left: -100%;
- }
4.用table布局实现来自评论里@qazxsw的方法:
- <table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
- <tr>
- <td width="200" bgcolor="red"></td>
- <td bgcolor="green"></td>
- </tr>
- </table>
运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com
不过这个方法,一定要设置高度才可以~5.触发BFC实现 —— 来自评论里柯南同学@15913127081的方法
关于BFC是什么、怎么触发BFC以及BFC可以用来做什么,大家可以看看这篇,前端精选文摘:BFC 神奇背后的原理(我会告诉你我也是才看的么~哈哈~)
实现方法,即为定宽元素设置float:left;自适应宽度元素设置可以触发BFC的属性。(可以触发BFC的属性?继续看上面那个链接!!)
示例:
HTML代码:- <div class="wrap_left">
- 我是左栏
- </div>
- <div class="wrap_right">
- 我是右栏
- </div>
CSS代码:
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap_left{
- float: left;
- width: 200px;
- }
- .wrap_right{
- overflow: hidden;
- }
6.flex伸缩盒方法
即父标签设置display:flex属性,自适应元素设置flex-grow:1;
HTML代码- <div class="wrap">
- <div class="wrap_left">
- 我是左栏
- </div>
- <div class="wrap_right">
- 我是右栏
- </div>
- </div>
复制代码
CSS代码- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap{
- display: flex;
- display: -webkit-flex;
- }
- .wrap_left{
- width: 200px;
- }
- .wrap_right{
- flex-grow:1;
- -webkit-flex-grow:1;
- }
二、三栏布局
掌握了上面的方法,我们会发现制作一个三栏布局也是非常容易的。
下面我们在上面栗子的基础上,看看实现一个两侧定宽,中间自适应的三栏布局如何实现
1. float + margin(两侧定宽,中间自适应)
HTML代码:- <div class="wrap_left">
- 我是左栏
- </div>
- <div class="wrap_right">
- 我是右栏
- </div>
- <div class="wrap_content">
- 我是中间栏
- </div>
复制代码
CSS代码:- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap_left{
- width: 200px;
- float: left;
- }
- .wrap_content{
- margin-left: 220px;
- margin-right: 220px;
- }
- .wrap_right{
- width: 200px;
- float: right;
- }
2. position + margin(两侧定宽,中间自适应)HTML代码:
- <div class="wrap_left">
- 我是左栏
- </div>
- <div class="wrap_right">
- 我是右栏
- </div>
- <div class="wrap_content">
- 我是中间栏
- </div>
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap_left{
- width: 200px;
- position: absolute;
- left: 0;
- }
- .wrap_content{
- margin-left: 220px;
- margin-right: 220px;
- }
- .wrap_right{
- width: 200px;
- position: absolute;
- right: 0;
- }
3.float + 负margin(两侧定宽,中间自适应)
HTML代码
- <div class="wrap">
- <div class="wrap_content">
- 我是中间栏
- </div>
- </div>
- <div class="wrap_left">
- 我是左栏
- </div>
- <div class="wrap_right">
- 我是右栏
- </div>
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap{
- float: left;;
- width: 100%;
- }
- .wrap_left{
- width: 200px;
- float: left;
- margin-left: -100%;
- }
- .wrap_content{
- margin-left: 220px;
- margin-right: 220px;
- }
- .wrap_right{
- width: 200px;
- float: left;
- margin-left: -200px;
- }