2.jpg<!DOCTYPE html>
<meta charset="utf-8">
<title>两栏自适应</title>
<style type="text/css">
.parent{overflow:hidden;
color:#fff;
}
.leftchild{
float:left;
width:100px;
height:100px;
background:red; }
.rightchild{background:green;
height:100px;
margin-left:100px;
}
.dingweibuju{
position:relative;
}
.dwlchild{width:100px;
height:100px;
background:blue;
position:absolute;
}
.dwrchild{
height:100px;
background:yellow;
margin-left:100px; }
</style> <!-- 浮动布局实现两栏自适应 -->
<div class="parent">
<div class="leftchild">222</div>
<div class="rightchild">我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局</div>
</div>
<!-- 浮动布局实现两栏自适应 -->
<div class="dingweibuju">
<div class="dwlchild">1111</div>
<div class="dwrchild">我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局</div>
</div><!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<style type="">
.dd{
overflow:hidden;
}
.left{
float: left;
width: 200px;
height:100px;
background:red;
}
.right{
width:200px;
height:100px;
background: green;
float:right;
}
.main{
margin-right: 200px;
margin-left: 200px;
height:100px;
background: blue;
}
.dw{position: relative;}
.dwleft{
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: greenyellow;
}
.dwright{
position: absolute;
right: 0;
width: 100px;
height: 100px;
background: gray;
}
.dwmain{
margin-left: 100px;
margin-right: 100px;
height: 100px;
background: rebeccapurple;
}
</style>
</head>
<body>
<div class="dd">
<div class="left">222</div>
<div class="right">我是自适应布局我是自适应布局我是自适应布局我是自适应布局</div>
<div class="main">我是自适应布局我是自适应布局我是自适应布局我是自适应布局</div>
</div>
<div class="dw">
<div class="dwleft">111</div>
<div class="dwright">我是自适应布局我是自适应布局我是自适应布局我是自适应布局</div>
<div class="dwmain">我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局我是自适应布局</div>
</div>
</body>2.png
