DIV+CSS前端开发怎么设置自适应

前端开发怎么设置自适应|前端开发者

问题：两栏布局，左边定宽200px，右边自适应。如何实现？
我的第一个反应就是：用flex伸缩盒呀，然后…

下面就来总结一下~

一、两栏布局（左定宽，右自动）

1. float + margin
即固定宽度元素设置float属性为left,自适应元素设置margin属性，margin-left应>=定宽元素宽度。
举例：
html代码：
[code] <div class=”wrap”>
<div class=”wrap_left”>
我是左栏
</div>
<div class=”wrap_right”>
我是右栏
</div>
</div>[/code]
css代码
[code] html,body,div{
margin: 0;
padding: 0;
}
.wrap{
margin: 10px;
}
.wrap_left{
float: left;
width: 200px;
background-color: red;
}
.wrap_right{
margin-left: 220px;
background-color: green;
}[/code]
代码片段 1

2.position + margin
即在父标签设置position属性为relative；子标签中定宽元素设置position属性为absolute；自适应元素设置margin属性，margin-left>=定宽元素宽度。
举例：
HTML代码
[code] <div class=”wrap”>
<div class=”wrap_left”>
我是左栏
</div>
<div class=”wrap_right”>
我是右栏
</div>
</div>[/code]
css代码
[code] html,body,div{
margin: 0;
padding: 0;
}
.wrap{
margin: 10px;
position: relative;
}
.wrap_left{
position: absolute;
width: 200px;
background-color: red;
}
.wrap_right{
margin-left: 220px;
background-color: green;
}[/code]
代码片段 2

3.float + 负margin
即给自适应宽度元素定义一个父标签，并设置float属性为left；width为100%；自适应宽度元素设置margin，margin-left应>=定宽元素宽度；
固定宽度元素设置margin-left属性为负值：-100%；
除此之外应注意HTML结构中应先写自适应元素，再写固定宽度元素。
举例：
HTML代码
[code]<div class=”wrap”>
<div class=”wrap_right”>
我是右栏
</div>
</div>
<div class=”wrap_left”>
我是左栏
</div>[/code]
css代码
[code] html,body,div{
margin: 0;
padding: 0;
}
.wrap{
float: left;
width: 100%;
}
.wrap .wrap_right{
margin-left: 220px;
background-color: green;
}
.wrap_left{
float: left;
width: 200px;
margin-left: -100%;
background-color: red;
}[/code]
代码片段 3

[color=Red]注[/color]：使用的float属性，必要时清除一下浮动。

4.用table布局实现
来自评论里@qazxsw的方法：
[code]<table width=”100%” cellspacing=”0″ cellpadding=”0″ border=”1″ height=”300″>
<tr>
<td width=”200″ bgcolor=”red”></td>
<td bgcolor=”green”></td>
</tr>
</table>[/code]
代码片段 4

不过这个方法，一定要设置高度才可以~

5.触发BFC实现 —— 来自评论里柯南同学@15913127081的方法
关于BFC是什么、怎么触发BFC以及BFC可以用来做什么，大家可以看看这篇，前端精选文摘：BFC 神奇背后的原理
实现方法，即为定宽元素设置float:left;自适应宽度元素设置可以触发BFC的属性。（可以触发BFC的属性？继续看上面那个链接！！）
示例：
HTML代码：
[code] <div class=”wrap_left”>
我是左栏
</div>
<div class=”wrap_right”>
我是右栏
</div>[/code]
CSS代码：
[code] html,body,div{
margin: 0;
padding: 0;
}

.wrap_left{
    float: left;
    width: 200px;
    background-color: red;
}
.wrap_right{
    overflow: hidden;
    background-color: green;
}[/code]

代码片段 5

前面有说到一般我都是用的flex伸缩盒，那也来说一下用flex怎么实现的吧
6.flex伸缩盒方法
即父标签设置display:flex属性，自适应元素设置flex-grow:1;
HTML代码
[code] <div class=”wrap”>
<div class=”wrap_left”>
我是左栏
</div>
<div class=”wrap_right”>
我是右栏
</div>
</div>[/code]
CSS代码
[code] html,body,div{
margin: 0;
padding: 0;
}
.wrap{
display: flex;
display: -webkit-flex;
}
.wrap_left{
width: 200px;
background-color: red;
}
.wrap_right{
flex-grow:1;
-webkit-flex-grow:1;
background-color: green;
}[/code]
代码片段 6

进阶

二、三栏布局

掌握了上面的方法，我们会发现制作一个三栏布局也是非常容易的。
下面我们在上面栗子的基础上，看看实现一个两侧定宽，中间自适应的三栏布局如何实现
1. float + margin（两侧定宽，中间自适应）
HTML代码：
[code] <div class=”wrap_left”>
我是左栏
</div>
<div class=”wrap_right”>
我是右栏
</div>
<div class=”wrap_content”>
我是中间栏
</div>[/code]
CSS代码：
[code]html,body,div{
margin: 0;
padding: 0;
}
.wrap_left{
width: 200px;
float: left;
background-color: red;
}

.wrap_content{
    margin-left: 220px;
    margin-right: 220px;
    background-color: yellow;
}
.wrap_right{
    width: 200px;
    float: right;
    background-color: green;
}[/code]

代码片段 7

2. position + margin（两侧定宽，中间自适应）
HTML代码：
[code]<div class=”wrap_left”>
我是左栏
</div>
<div class=”wrap_right”>
我是右栏
</div>
<div class=”wrap_content”>
我是中间栏
</div>[/code]
CSS代码
[code] html,body,div{
margin: 0;
padding: 0;
}
.wrap_left{
width: 200px;
position: absolute;
background-color: red;
left: 0;
}

.wrap_content{
    margin-left: 220px;
    margin-right: 220px;
    background-color: yellow;
}
.wrap_right{
    width: 200px;
    position: absolute;
    right: 0;
    background-color: green;
}[/code]

代码片段 8

3.float + 负margin（两侧定宽，中间自适应）
HTML代码
[code]<div class=”wrap”>
<div class=”wrap_content”>
我是中间栏
</div>
</div>
<div class=”wrap_left”>
我是左栏
</div>
<div class=”wrap_right”>
我是右栏
</div>[/code]
CSS代码
[code] html,body,div{
margin: 0;
padding: 0;
}
.wrap{
float: left;;
width: 100%;
}
.wrap_left{
width: 200px;
float: left;
margin-left: -100%;
background-color: red;

}

.wrap_content{
    margin-left: 220px;
    margin-right: 220px;
    background-color: yellow;
}
.wrap_right{
    width: 200px;
    float: left;
    margin-left: -200px;
    background-color: green;
}[/code]

代码片段 9

4.table实现
[code] <table width=”100%” cellspacing=”0″ cellpadding=”0″ border=”1″ height=”300″>
<tr>
<td width=”200″ bgcolor=”red”></td>
<td bgcolor=”yellow”></td>
<td width=”200″ bgcolor=”green”></td>
</tr>
</table>[/code]
代码片段 10

5.BFC方法
HTML代码
[code] <div class=”wrap_left”>
我是左栏
</div>
<div class=”wrap_right”>
我是右栏
</div>
<div class=”wrap_content”>
我是中间栏
</div>[/code]
CSS代码
[code] html,body,div{
margin: 0;
padding: 0;
}

.wrap_left{
    float: left;
    width: 200px;
    background-color: red;
}
.wrap_right{
    float: right;
    width: 200px;
    background-color: green;
}
.wrap_content{
    overflow: hidden;
    background-color: yellow;
}[/code]

代码片段 11

注：HTML中先写定宽元素，再写自适应宽度元素。

6.flex伸缩盒
即父标签设置display:flex属性，自适应元素设置flex-grow:1;
HTML代码
[code] <div class=”wrap”>
<div class=”wrap_left”>
我是左栏
</div>
<div class=”wrap_content”>
我是中间栏
</div>
<div class=”wrap_right”>
我是右栏
</div>
</div>[/code]
CSS代码
[code] html,body,div{
margin: 0;
padding: 0;
}
.wrap{
display: flex;
display: -webkit-flex;
}
.wrap_left{
width: 200px;
background-color: red;
}
.wrap_right{
width: 200px;
background-color: green;
}
.wrap_content{
flex-grow:1;
-webkit-flex-grow:1;
background-color: yellow;
}[/code]
代码片段 12

前端开发怎么设置自适应|网站前端开发

https://www.rokub.com