这是一个div布局,中部自适应的代码
下面是第一次的div布局顺序代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.one{
width:75px;
height:100px;
background-color:#F60;
float:left;
margin-top:0px;
margin-left:0px;
}
.two{
height:100px;
background-color:#F00;
margin-left:75px;
margin-right:75px;
}
.three{
width: 75px;
height: 100px;
background-color: #FC0;
float: right;
margin-top:0px;
margin-right:0px;
}
</style>
</head>
<body>
<div class="one">this is one</div>
<div class="two">this is three</div>
<div class="three">this is three</div>
</body>
</html>
这是运行结果
下面是调整后的代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.one{
width:75px;
height:100px;
background-color:#F60;
float:left;
margin-top:0px;
margin-left:0px;
}
.two{
height:100px;
background-color:#F00;
margin-left:75px;
margin-right:75px;
}
.three{
width: 75px;
height: 100px;
background-color: #FC0;
float: right;
margin-top:0px;
margin-right:0px;
}
</style>
</head>
<body>
<div class="one">this is one</div>
<div class="three">this is three</div>
<div class="two">this is three</div>
</body>
</html>
运行如下
求大神讲解一下!!!