自适应布局解决方案

这一次来说说传说中的自适应布局吧，如今我们写的页面大多是要兼容多种移动设备的，自适应布局便可以巧妙地解决这个问题。

NO.1 宽度自适应

1、两列布局，一个宽度固定，一个宽度自适应。

<style type="text/css">
.left{width: 200px;height: 100px;background-color: red;float: left;}
.zsy{width: 100%;height: 100px;background-color: green;}
</style>

<div class="left"></div>
<div class="zsy">我是自适应啊</div>

2、三列布局，左右宽度固定，中间部分自适应。(注自适应部分如果里面有子元素，子元素的左右margin值为左右div的宽度值)

<style type="text/css">
.left{width: 200px;height: 100px;background-color: red;float: left;}
.right{width: 200px;height: 100px;background-color: yellow;float: right;}
.zsy{width: 100%;height: 100px;background-color: green;}
.zsy div{margin-left: 250px;margin-right:200px;width: 50%;border:1px solid red;}
</style>

<div class="left"></div>
<div class="right"> </div>
<div class="zsy"><div>大家好我是自适应部分的子元</div></div>

3、左边不定宽，右边自适应。

➜float+overflow

<style type="text/css">
.left{background-color: red;height: 200px;float: left;}
.right{overflow: hidden;height: 400px;background-color: yellow}
</style>

<div class="left">
sssssssssssssssssssssssssssxxxxxxxxxxx
</div>
<div class="right"></div>

➜table(注：其中一个子元素要有宽度)

<style type="text/css">
.parent{display: teble;width: 100%}
.left{background-color: red;height: 200px;display: table-cell;width:10%}
.right{height: 400px;background-color: yellow;display: table-cell;}
</style>

<div class="parent">
<div class="left">
	sssssssssssssssssssssssssssxxxxxxxxxxx
</div>
<div class="right">sssssssss</div>
</div>

➜flex

<style type="text/css">
.parent{display: flex;width: 100%;height:200px;border:1px solid red;}
.left{background-color: red;height: 200px;}
.right{height: 400px;background-color: yellow;flex:1;}
</style>

<div class="parent">
<div class="left">
	ssssssssssss
</div>
<div class="right">ttttttsssssssss</div>
</div>

NO.2 高度自适应

1、上面高度固定，下面自适应

<style type="text/css">
.top{width: 100%;height: 100px;background-color: red;}
.zsy{width: 100%;background-color: green;position: absolute;top: 100px;bottom: 0px}
</style>

<div class="top"></div>
<div class="zsy">大家好我是自适应部分的子元</div>

2、上下高度固定，中间自适应

<style type="text/css">
.top{width: 100%;height: 100px;background-color: red;}
.zsy{width: 100%;background-color: green;position: absolute;top: 100px;bottom: 0px}
.bot{position: absolute;width: 100%;height:100px;background-color: yellow;bottom: 0 }
</style>

<div class="top"></div>
<div class="zsy">大家好我是自适应部分的子元</div>
<div class="bot"></div>

3、内容不同时等高。

➜table

<style type="text/css">
.parent{display: table;width: 100%;table-layout:fixed;border:1px solid red;}
.left{background-color: red;display: table-cell;}
.right{background-color: yellow;display: table-cell;}
</style>

<div class="parent">
<div class="left">
	ssssssssssss
</div>
<div class="right">ttttttsssssssss
<p>kkkkk</p>
</div>
</div>

➜flex(align-items侧轴对齐伸缩项目，默认stretch：伸缩项目拉伸，填满整个侧轴。)

<style type="text/css">
.parent{display: flex;width: 100%;border:1px solid red;}
.left{background-color: red;}
.right{background-color: yellow;flex:1;}
</style>

<div class="parent">
<div class="left">
	ssssssssssss
</div>
<div class="right">ttttttsssssssss</div>
</div>

➜float

<style type="text/css">
.parent{overflow:hidden;border:1px solid red;}
.left,.right{background-color: red;float: left;padding-bottom: 9999px;margin-bottom:-9999px; }
</style>

<div class="parent">
<div class="left">
	ssssssssssss
</div>
<div class="right">ttttttsssssssss
<p>dddd</p>
</div>
</div>
(注：先写padding再写margin，否则不好使)