1、首选看一下html代码：
html代码：
<div id="left">
<div class="inner">this is left sidebar content</div>
</div>
<div id="main">
<div class="inner">this is main content</div>
</div>
<div id="right">
<div class="inner">this is right siderbar content</div>
</div>
这种方法是借助于负的margin来实现的，首先在中间列定好固定值，因为此值是不会在改变的，接着对其进行左浮动；那么关键地主是在左右边栏设置地方，这种方法是将其都进行50%的宽度设置，并加上中负的左边距，此负的左边距最理想的值是中间栏宽度的一半加上1px，这样一来，左右边栏内容无法正常显示，那是因为对他们进行了负的左边距操作，现在只需要在左右边栏的内层div.inner将其拉回来。
2、css样式写法如下：
#left,
#right {
float: left
margin: 0 0 0 -271px
width: 50%
}
#main {
width: 540px
float: left
background: green
}
.inner {
padding: 20px
}
#left .inner,
#right .inner {
margin: 0 0 0 271px
background: orange
}
3、具体效果如下：
是通过百分比来控制宽度；
width:100%通过百分比自适应宽度。注意；此百分比是相对于父级元素宽度。父级元素宽度1000px；子元素设置百分比；是父级元素的百分比；
2.可以通过块状元素自动占满父级的宽度的特性来实现
div默认display:block；不对div设置宽度。div默认占满父级元素的宽度。
3.flex-box布局，用flex布局的话，非常的方便可以实现多种自适应布局，但是，只适用于移动端，PC端上面只有高版本的浏览器才兼容，低版本的浏览器是不兼容的。
css自适应宽度有2种方式：1.是通过百分比来控制宽度；
2.可以通过块状元素自动占满父级的宽度的特性来实现
PS：当然还有一些方法，比如css3的flex-box布局，用flex布局的话，非常的方便可以实现多种自适应布局，但是，只适用于移动端，PC端上面只有高版本的浏览器才兼容，低版本的浏览器是不兼容的。
