- 左右布局，左边固定，右边自适应布局
-
BFC方法解决
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div + css宽度自适应（液态布局）</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*左边栏，设定宽度*/
body,#wrap{
width: 100%;
border: 1px yellow;
}
.wrap_l
{
float: left;
height: 150px;
width: 150px;
border: 1px solid #333;
}
/*中间栏，宽度auto,*/
.wrap_m
{
overflow: hidden;
border: 1px solid #000;
background: red;
}
</style>
</head>
<body>
<div id="wrap">
<div class="wrap_l">
这是左边部分<br />
这是左边部分<br />
这是左边部分
</div>
<div class="wrap_m">
这是中间部分
</div>
</div>
</body> </html>原理：给左侧添加
overflow: hidden;将div改变成BFC模型,display:block;标签的dom的宽度是自适应占满全部的
-
用position:absolute;处理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div + css宽度自适应（液态布局）</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*左边栏，设定宽度*/
body,#wrap{
width: 100%;
margin: 0px;
border: 1px yellow;
}
.wrap_l
{
float: left;
height: 150px;
width: 150px;
border: 1px solid #333;
}
/*中间栏，宽度auto,*/
.wrap_m
{
position:absolute;
left:152px;
right: 0px;
border: 1px solid #000;
background: red;
}
</style>
</head>
<body>
<div id="wrap">
<div class="wrap_l">
这是左边部分<br />
这是左边部分<br />
这是左边部分
</div>
<div class="wrap_m">
这是中间部分
</div>
</div>
</body> </html>
一般以父元素未计算元素，父元素一般有一定的宽度，绝对布局是相对父dom元素的，如果相对父dom元素无效，可以将父dom元素的postion：relative相对出来
这个写法兼容ie6以上的版本
-
用table布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div + css宽度自适应（液态布局）</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*左边栏，设定宽度*/
html,body{
width: 100%;
height: 100%
}
</style>
</head>
<body>
<table style="width:100%;height:100%;background:red">
<tr>
<td style="background:yellow;width:100px">我是左边</td><td style="background:blue">我是右边</td>
</tr>
</table>
</body> </html>
table的布局的其实实现原理也部分设置到BFC的特性
-
display:table 仿table布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div + css宽度自适应（液态布局）</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*左边栏，设定宽度*/
html,body{
width: 100%;
height: 100%
}
#wrap{
width: 100%;
height: 50%;
display: table;
}
.wrap_l
{
height: 150px;
width: 150px;
display: table-cell;
border: 1px solid #333;
}
/*中间栏，宽度auto,*/
.wrap_m
{
display: table-cell;
border: 1px solid #000;
background: red;
}
</style>
</head>
<body>
<div id="wrap">
<div class="wrap_l">
这是左边部分<br />
这是左边部分<br />
这是左边部分
</div>
<div class="wrap_m">
这是中间部分
</div>
</div>
<table style="width:100%;height:50%;background:red">
<tr>
<td style="background:yellow;width:100px">我是左边</td><td style="background:blue">我是右边</td>
</tr>
</table>
</body>
</html> - css3解决方案，主要利用弹性盒模型
<!DOCTYPE html>
<html >
<head>
<title>div + css宽度自适应（液态布局）</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*左边栏，设定宽度*/
html,body{
width: 100%;
height: 100%
}
#wrap{
display: flex;
width: 100%;
}
.wrap_l
{
height: 150px;
width: 150px;
background: yellow;
}
/*中间栏，宽度auto,*/
.wrap_m
{
flex:1;
background: blue;
}
</style>
</head>
<body>
<div id="wrap">
<div class="wrap_l">
这是左边部分<br />
这是左边部分<br />
这是左边部分
</div>
<div class="wrap_m">
这是中间部分
</div>
</div>
</body>
</html>
css3给我们提供的很多css2中很多很繁琐的问题，在css3为我们提供了弹性盒模型，之前的css3标签是display:box之后版本为flex，
它的特性就是：在子区域内添加任意数量的元素水平和竖直排序，子元素可以设置标签flex：1 控制所占的百分比，水平标签一般设置flex-direction：column 这种写法兼容最新版，老版本的是box-orient：horizontal
