老师我ABOUT区的图文混排不知道怎么写，写错的一塌糊涂。可以教下我吗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>zuoye</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{font-family: Microsoft YaHei UI;}
.header{width: 100%;height: 80px;
background-color: #07cdc9
}
.logo{float: left;margin-left: 150px;width: 200px;}
.logo img{margin-top: 16px;}
.nav{float: right;margin-right: 100px;}
.nav li{display: inline-block;color: white;line-height: 80px;padding-left: 20px;font-style: weight;}
.banner img{width: 100%;height: 400px;margin-top: 0;position: relative;}
.kuang{position: absolute;left: 50%;top: 200px;}
.kuang input{width: 505px;height: 39px;margin: 10px 0;background: transparent;border: 1px solid gray;}
.about .h1{text-align: center;font-size: 50px;margin-top: 50px;margin-bottom: 25px;font-weight:bold;}
.about .line{width: 30px;margin-bottom: 25px;margin:0 auto;}
.about .h2{text-align: center;font-size: 15px;margin-top: 20px;}
.mid{width: 568px;height: 380px;margin:20px auto;position: relative;}
.mid img{width: 568px;height:380px;}
.stu{width: 238px;height: 144px;text-align: center;border: 1px solid #07cbc9;position: absolute;top: 0;right: -258px;}
.stu .stu1{font-size: 40px,font-weight:bolder;margin:20px;}
.stu hr{margin:0 auto;width: 30px;}
.stu .stu2{font-size: 25px;margin:20px;}
.stubox{width: 238px;height: 144px;text-align: center;border: 1px solid #07cbc9;position: absolute;top:174px;right: -258px;}
.stubox .stu1{font-size: 40px,font-weight:bolder;margin:20px;}
.stubox hr{margin:0 auto;width: 30px;}
.stubox .stu2{font-size: 25px;margin:20px;}
.mid .leftbox{position: absolute;top: 0;left: -270px;}
.mid .leftbox .leftbox2{border: 1px solid gray;width: 370px;height: 246px;position: relative;}
.mid .leftbox .leftbox2 .toplayer{width: 370px;height: 246px;background-color: gray;opacity: 0.05;position: absolute;top: 0;left: 0;}
.mid .leftbox .leftbox1{font-size: 20px;font-weight: bolder;}
.mid .leftbox .leftbox2 .text{margin: 20px 15px;}
.mid .leftbox .leftbox2 .button{width: 102px;height: 45px;background-color: ;color:white;margin: 10px 15px;text-align: center;font-size: 10px;}
.tuwen .tu img{width: 25%;height:350px; }
.tuwen .wen{width: 25%;height: 350px;background-color: #07cbc9}
.tuwen .shang{width: 100%;margin: 0 auto;}
.tuwen .xia{width:100%;margin: 0 auto; }
.tuwen .shang .tuwen1{float: left;width: 25%;}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="logo.png">
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>ECENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div class="banner">
<img src="banner3.jpg">
<div class="kuang">
<input type="text" name="baba" class="input1" placeholder="you name"><br>
<input type="text" name="baba" class="input1" placeholder="your phone"><br>
<input type="text" name="baba" class="input1" placeholder="you dsdasd"><br>
<input type="text" name="baba" class="input2" placeholder="asasfsagasgasg">
</div>
</div>
<div class="about">
<div class="h1">ABOUT</div>
<div class="line">
<hr color="#07cbc9" />
</div>
<div class="h2">lorem ipsum is simply dummy tex of the printing and typesetting <br>industry lorem insum has been the industrys standard dummy
<br> text ever since the 1550
</div>
</div>
<div class="mid">
<img src="bb3.jpg">
<div class="stu">
<div class="stu1">70000</div>
<hr color="#07cbc9">
<div class="stu2">students</div>
</div>
<div class="stubox">
<div class="stu1">600</div>
<hr color="#07cbc9">
<div class="stu2">Facuity</div>
</div>
<div class="leftbox">
<div class="leftbox1">A WORD<br>ABOUT US</div>
<div class="leftbox2">
<div class="text">
praesent dingsddim viverra est,sed<br>
bibendum ligula congue non.sad ca nisl<br>et felis gravida commodo ?suspendisse<br>eget ullamcorper ipsum.suspending<br>
diam amet.
</div>
<div class="button">
<button>EXPLORE</button>
</div>
<div class="toplayer"></div>
</div>
</div>
</div>
<div class="tuwen">
<div class="shang">
<div class="tuwen1 tu"><img src="b1.jpg"></div>
<div class="tuwen1 wen">zxvzxvzxvzxv</div>
<div class="tuwen1 tu"><img src="b2.jpg"></div>
<div class="tuwen1 wen">zxvzxvzxvzxv</div>
</div>
<div class="xia">
<div class="tuwen2 tuwen2 wen ">zxvzxvzxvzxv</div>
<div class="tuwen2 tu"><img src="b3.jpg"></div>
<div class="tuwen2 wen">zxvzxvzxvzxv</div>
<div class="tuwen2 tu"><img src="b4.jpg"></div>
</div>
</div>
</body>
</html>
正在回答
你好同学，about区域下部分图文混排不需要上下两行单独嵌套div了。另外，图片的宽度设置的不对，图片在自己的父元素区域是100%显示的，所以宽度设置100%。老师在另一个回复中提供了详细的思路，如下
http://class.imooc.com/course/qadetail/132687
可以按照思路稍作调整，如果哪一步不会做了，可以在问答区域重新提问，老师会为你解答的哦。
祝学习愉快，望采纳。
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星