要怎么才能让招募信息下面的一堆文字在他旁边
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中华支教信息中心</title>
<style>
*{margin: 0;padding: 0;font-size: 12px;}
ul li{list-style: none;}
.clear{clear: both;font-size: 1px;width: 1px;height: 0px;visibility: hidden;overflow: hidden;}
.top{background: #4CB0A0;width:100%;display: table;}
.top ul {float: right;margin-right:0px; }
.top ul li {float: left;margin:5px; }
.top ul li a{text-decoration:none;display: block;color: ##c2c2c2;line-height: :30px;margin: 10px 0px;width: 75px;text-align: center;}
#xiaohai {font-size:200%;height: 350px; background-image: url("zhijiao.jpeg");background-size:cover;height: 700px;}
h1 {font-size: 150%;padding: 50px;text-align: center;font-family: FangSong;color: green;text-decoration: none;}
.main{width:1000px;overflow:hidden;margin:20px auto;}
.aboutus{width:700px;float:left;}
.aboutus img{width:280px;height:200px;float:left;margin-right:20px;}
.aboutus p{text-indent:28px;line-height:26px;}
.zhijiaoxinxi .title{width:10%;height:120px;line-height:30px;background-color:#fff433;font-size:20px;text-align: center;text-decoration:none;font-family: FangSong;}
.zhijiaoxinxi ul{width:300px;}
.zhijiaoxinxi li{height:26px;line-height:26px;text-indent:20px;overflow:hidden;}
.zhijiaoxinxi li a{color:#000;text-decoration: none;}
.zhijiaoxinxi li a:hover{color:#dd3b30;}
.zhijiaoxinxi {width:280px;float:right;}
.tuji{width:100%;clear:both;padding-top:10px;overflow:hidden;}
.tuji .title{height:30px;line-height:30px;border-bottom:10px solid #84C1FF;font-size:20px;color:#AAAAFF;}
.tuji .title span{width:100px;height:30px;text-align:center;float:center;font-size: 20px;}
.tuji ul{padding-top:10px;}
.tuji li{width:240px;margin:5px;float:right;background:#f2f2f2;}
.tuji li img{width:240px;height:180px;}
</style>
</head>
<body>
<div class="top">
<ul>
<li><a href="login.html">登陆</a></li>
<li><a href="reg.html">注册</a></li>
<li><a href="baoming.html">报名支教</a></li>
<li><a href="#">支教老师须知</a></li>
<li><a href="ND.HTML">关于我们-ND</a></li>
</ul>
</div>
<div id="xiaohai">
<h1>关爱儿童，关爱未来</h1>
</div>
<div class="main">
<div class="aboutus">
<img src="luanke.jpg">
<p>
有这样一个德国人，从1997年开始，常年深入到中国广西不通电话、
不通公路的偏远山村，
去陪伴当地的乡村留守儿童。
在当地村民眼中：
这个不抽烟、不喝酒、不吃肉、
不要工资，也不谈恋爱，
整天与乡村孩子在一起的德国人，
就是个一个“怪人”。
</p>
<p>
他的行为吸引央视记者柴静，
两次前往深山进行采访。
第一次采访结束后柴静就觉得：
面对这个人，让自己土崩瓦解……
无形中这位德国中年男人，成了柴静的精神导师。他的事迹被媒体广泛报道后，有人说他是圣徒，是当代“白求恩”，也有人说他是异类，是失败者……但他不为所动，我只是在遵从我的内心，做我自己想做的事。这个德国人曾经有个中文名字：卢安克
</p>
</div>
<div class="zhijiaoxinxi">
<div class="title">招募信息</div>
<ul>
<li><a href="zhijiaoxinxi1.html">艺启梦想西部支教志愿者</a></li>
<li><a href="zhijiaoxinxi2.html">本木源助学四川支教志愿者老师申请</a></li>
<li><a href="zhijiaoxinxi3.html">荞麦花开四川支教志愿者老师申请</a></li>
<li><a href="zhijiaoxinxi4.html">绿之叶公益四川支教老师申请</a></li>
<li><a href="zhijiaoxinxi5.html">索玛花四川凉山支教老师申请</a></li>
<li><a href="zhijiaoxinxi6.html">小书包公益重庆支教老师申请</a></li>
<li><a href="zhijiaoxinxi7.html">为中国而教支教老师申请</a></li>
</ul>
</div>
<div class="tuji">
<div class="title"><span>支教图集</span></div>
<ul>
<li>
<img src="zhijiao1.webp">
</li>
<li>
<img src="zhijiao2.jpeg">
</li>
<li>
<img src="zhijiao3.jpeg">
</li>
<li>
<img src="zhijiao4.jpeg">
</li>
</ul>
</div>
</body>
</html> 问题如图 本帖最后由 临时号 于 2022-6-13 21:20 编辑
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中华支教信息中心</title>
<style>
*{margin: 0;padding: 0;font-size: 12px;}
ul li{list-style: none;}
.clear{clear: both;font-size: 1px;width: 1px;height: 0px;visibility: hidden;overflow: hidden;}
.top{background: #4CB0A0;width:100%;display: table;}
.top ul {float: right;margin-right:0px; }
.top ul li {float: left;margin:5px; }
.top ul li a{text-decoration:none;display: block;color: ##c2c2c2;line-height: :30px;margin: 10px 0px;width: 75px;text-align: center;}
#xiaohai {font-size:200%;height: 350px; background-image: url("zhijiao.jpeg");background-size:cover;height: 700px;}
h1 {font-size: 150%;padding: 50px;text-align: center;font-family: FangSong;color: green;text-decoration: none;}
.main{width:1000px;overflow:hidden;margin:20px auto;}
.aboutus{width:700px;float:left;}
.aboutus img{width:280px;height:200px;float:left;margin-right:20px;}
.aboutus p{text-indent:28px;line-height:26px;}
.zhijiaoxinxi .title{width:10%;height:120px;line-height:30px;background-color:#fff433;font-size:20px;text-align: center;text-decoration:none;font-family: FangSong;}
.zhijiaoxinxi ul{width:300px;}
.zhijiaoxinxi li{height:26px;line-height:26px;text-indent:20px;overflow:hidden;}
.zhijiaoxinxi li a{color:#000;text-decoration: none;}
.zhijiaoxinxi li a:hover{color:#dd3b30;}
.zhijiaoxinxi {width:280px;float:right;}
.zhijiaoxinxi {display: flex;}
.tuji{width:100%;clear:both;padding-top:10px;overflow:hidden;}
.tuji .title{height:30px;line-height:30px;border-bottom:10px solid #84C1FF;font-size:20px;color:#AAAAFF;}
.tuji .title span{width:100px;height:30px;text-align:center;float:center;font-size: 20px;}
.tuji ul{padding-top:10px;}
.tuji li{width:240px;margin:5px;float:right;background:#f2f2f2;}
.tuji li img{width:240px;height:180px;}
</style>
</head>
<body>
<div class="top">
<ul>
<li><a href="login.html">登陆</a></li>
<li><a href="reg.html">注册</a></li>
<li><a href="baoming.html">报名支教</a></li>
<li><a href="#">支教老师须知</a></li>
<li><a href="ND.HTML">关于我们-ND</a></li>
</ul>
</div>
<div id="xiaohai">
<h1>关爱儿童，关爱未来</h1>
</div>
<div class="main">
<div class="aboutus">
<img src="luanke.jpg">
<p>
有这样一个德国人，从1997年开始，常年深入到中国广西不通电话、
不通公路的偏远山村，
去陪伴当地的乡村留守儿童。
在当地村民眼中：
这个不抽烟、不喝酒、不吃肉、
不要工资，也不谈恋爱，
整天与乡村孩子在一起的德国人，
就是个一个“怪人”。
</p>
<p>
他的行为吸引央视记者柴静，
两次前往深山进行采访。
第一次采访结束后柴静就觉得：
面对这个人，让自己土崩瓦解……
无形中这位德国中年男人，成了柴静的精神导师。他的事迹被媒体广泛报道后，有人说他是圣徒，是当代“白求恩”，也有人说他是异类，是失败者……但他不为所动，我只是在遵从我的内心，做我自己想做的事。这个德国人曾经有个中文名字：卢安克
</p>
</div>
<div class="zhijiaoxinxi">
<div class="title">招募信息</div>
<ul>
<li><a href="zhijiaoxinxi1.html">艺启梦想西部支教志愿者</a></li>
<li><a href="zhijiaoxinxi2.html">本木源助学四川支教志愿者老师申请</a></li>
<li><a href="zhijiaoxinxi3.html">荞麦花开四川支教志愿者老师申请</a></li>
<li><a href="zhijiaoxinxi4.html">绿之叶公益四川支教老师申请</a></li>
<li><a href="zhijiaoxinxi5.html">索玛花四川凉山支教老师申请</a></li>
<li><a href="zhijiaoxinxi6.html">小书包公益重庆支教老师申请</a></li>
<li><a href="zhijiaoxinxi7.html">为中国而教支教老师申请</a></li>
</ul>
</div>
<div class="tuji">
<div class="title"><span>支教图集</span></div>
<ul>
<li>
<img src="zhijiao1.webp">
</li>
<li>
<img src="zhijiao2.jpeg">
</li>
<li>
<img src="zhijiao3.jpeg">
</li>
<li>
<img src="zhijiao4.jpeg">
</li>
</ul>
</div>
</body>
</html>
将class="zhijiaoxinxi"的布局渲染改成flex即可
页:
[1]