【问题代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}
.top {
background-color: black;
1920px;
height: 40px;
}
.body {
background-color: red;
1200px;
height: 200px;
margin: 0 auto;
}
.left {
background-color: yellow;
200px;
height: 80px;
float: left;
}
.centen {
background-color: blue;
200px;
height: 40px;
margin: 0 auto;
margin-top: 10px;
}
.right {
background-color: green;
200px;
height: 80px;
float: right;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="body">
<div class="left"></div>
<div class="centen"></div>
<div class="right"></div>
</div>
</body>
</html>
】
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}
.top {
background-color: black;
1920px;
height: 40px;
}
.body {
background-color: red;
1200px;
height: 200px;
margin: 0 auto;
margin-top: 10px;
}
.w200 {
200px;
}
.h80 {
height: 80px;
}
.h40 {
height: 40px;
}
.left_content_right {
/*相对其正常位置*/
position: relative;
}
.left {
background-color: yellow;
}
.centen {
background-color: blue;
/*relative 相对正常位置，调试确定其正常位置;*/
margin: 0 auto;
/*60=40+20*/
margin-top: -60px;
}
.right {
background-color: green;
/*relative 相对正常位置，margin-top: -60px;float: right;*/
float: right;
margin-top: -60px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="body">
<div class="left w200 h80 left_content_right"></div>
<div class="centen w200 h40 left_content_right"></div>
<div class="right w200 h80 left_content_right"></div>
</div>
</body>
</html>