设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 要怎么才能让招募信息下面的一堆文字在他旁边
返回列表 发新帖
查看: 1027|回复: 2

[已解决]要怎么才能让招募信息下面的一堆文字在他旁边

[复制链接]
天道8
发表于 2022-6-9 11:35:28 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x

  2. <!DOCTYPE html>
  3. <html>
  4.         <head>
  5.                 <meta charset="utf-8">
  6.                 <title>中华支教信息中心</title>
  7.                 <style>
  8.                 *{margin: 0;padding: 0;font-size: 12px;}
  9.                 ul li{list-style: none;}
  10.                 .clear{clear: both;font-size: 1px;width: 1px;height: 0px;visibility: hidden;overflow: hidden;}
  11.                 .top{background: #4CB0A0;width:100%;display: table;}
  12.                 .top ul {float: right;margin-right:0px; }
  13.                 .top ul li {float: left;margin:5px; }
  14.                 .top ul li a{text-decoration:none;display: block;color: ##c2c2c2;line-height: :30px;margin: 10px 0px;width: 75px;text-align: center;}
  15.                 #xiaohai {font-size:200%;height: 350px; background-image: url("zhijiao.jpeg");background-size:cover;height: 700px;}
  16.                 h1 {font-size: 150%;padding: 50px;text-align: center;font-family: FangSong;color: green;text-decoration: none;}
  17.                 .main{width:1000px;overflow:hidden;margin:20px auto;}
  18.                 .aboutus{width:700px;float:left;}
  19.                 .aboutus img{width:280px;height:200px;float:left;margin-right:20px;}
  20.                 .aboutus p{text-indent:28px;line-height:26px;}
  21.                 .zhijiaoxinxi .title{width:10%;height:120px;line-height:30px;background-color:#fff433;font-size:20px;text-align: center;text-decoration:none;font-family: FangSong;}
  22.                 .zhijiaoxinxi ul{width:300px;}
  23.                 .zhijiaoxinxi li{height:26px;line-height:26px;text-indent:20px;overflow:hidden;}
  24.                 .zhijiaoxinxi li a{color:#000;text-decoration: none;}
  25.                 .zhijiaoxinxi li a:hover{color:#dd3b30;}
  26.                 .zhijiaoxinxi {width:280px;float:right;}
  27.                 .tuji{width:100%;clear:both;padding-top:10px;overflow:hidden;}
  28.                 .tuji .title{height:30px;line-height:30px;border-bottom:10px solid #84C1FF;font-size:20px;color:#AAAAFF;}
  29.                 .tuji .title span{width:100px;height:30px;text-align:center;float:center;font-size: 20px;}
  30.                 .tuji ul{padding-top:10px;}
  31.                 .tuji li{width:240px;margin:5px;float:right;background:#f2f2f2;}
  32.                 .tuji li img{width:240px;height:180px;}

  34.                 </style>
  35.         </head>
  36.         <body>
  37.                 <div class="top">
  38.                                 <ul>
  39.                                 <li><a href="login.html">登陆</a></li>
  40.                                 <li><a href="reg.html">注册</a></li>
  41.                                 <li><a href="baoming.html">报名支教</a></li>
  42.                                 <li><a href="#">支教老师须知</a></li>
  43.                                 <li><a href="ND.HTML">关于我们-ND</a></li>
  44.                                 </ul>               
  45.                 </div>

  47.                  <div id="xiaohai">
  48.             <h1>关爱儿童，关爱未来</h1>
  49.                           </div>
  50.          
  51.                 <div class="main">

  53.         <div class="aboutus">
  54.             <img src="luanke.jpg">
  55.             <p>
  56.                有这样一个德国人，从1997年开始，常年深入到中国广西不通电话、
  57. 不通公路的偏远山村，
  58. 去陪伴当地的乡村留守儿童。
  59. 在当地村民眼中：
  60. 这个不抽烟、不喝酒、不吃肉、
  61. 不要工资，也不谈恋爱，
  62. 整天与乡村孩子在一起的德国人，
  63. 就是个一个“怪人”。
  64.             </p>
  65.             <p>
  66.                他的行为吸引央视记者柴静，
  67. 两次前往深山进行采访。
  68. 第一次采访结束后柴静就觉得：
  69. 面对这个人，让自己土崩瓦解……
  70. 无形中这位德国中年男人，成了柴静的精神导师。他的事迹被媒体广泛报道后，有人说他是圣徒，是当代“白求恩”，也有人说他是异类，是失败者……但他不为所动，我只是在遵从我的内心，做我自己想做的事。这个德国人曾经有个中文名字：卢安克
  71.             </p>

  73.         </div>
  74.         <div class="zhijiaoxinxi">
  75.             <div class="title">招募信息</div>
  76.             <ul>
  77.                 <li><a href="zhijiaoxinxi1.html">艺启梦想西部支教志愿者</a></li>
  78.                 <li><a href="zhijiaoxinxi2.html">本木源助学四川支教志愿者老师申请</a></li>
  79.                 <li><a href="zhijiaoxinxi3.html">荞麦花开四川支教志愿者老师申请</a></li>
  80.                 <li><a href="zhijiaoxinxi4.html">绿之叶公益四川支教老师申请</a></li>
  81.                 <li><a href="zhijiaoxinxi5.html">索玛花四川凉山支教老师申请</a></li>
  82.                 <li><a href="zhijiaoxinxi6.html">小书包公益重庆支教老师申请</a></li>
  83.                 <li><a href="zhijiaoxinxi7.html">为中国而教支教老师申请</a></li>
  84.             </ul>
  85.                 </div>
  86.                  <div class="tuji">
  87.             <div class="title"><span>支教图集</span></div>
  88.             <ul>
  89.                 <li>
  90.                     <img src="zhijiao1.webp">
  91.                 </li>
  92.                 <li>
  93.                     <img src="zhijiao2.jpeg">
  94.                 </li>
  95.                 <li>
  96.                     <img src="zhijiao3.jpeg">
  97.                 </li>
  98.                 <li>
  99.                     <img src="zhijiao4.jpeg">
  100.                 </li>               
  101.             </ul>
  102.         </div>

  104.         </body>
  105. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
临时号
2022-6-9 13:38:22
本帖最后由 临时号 于 2022-6-13 21:20 编辑

  2. <!DOCTYPE html>
  3. <html>
  4.         <head>
  5.                 <meta charset="utf-8">
  6.                 <title>中华支教信息中心</title>
  7.                 <style>
  8.                 *{margin: 0;padding: 0;font-size: 12px;}
  9.                 ul li{list-style: none;}
  10.                 .clear{clear: both;font-size: 1px;width: 1px;height: 0px;visibility: hidden;overflow: hidden;}
  11.                 .top{background: #4CB0A0;width:100%;display: table;}
  12.                 .top ul {float: right;margin-right:0px; }
  13.                 .top ul li {float: left;margin:5px; }
  14.                 .top ul li a{text-decoration:none;display: block;color: ##c2c2c2;line-height: :30px;margin: 10px 0px;width: 75px;text-align: center;}
  15.                 #xiaohai {font-size:200%;height: 350px; background-image: url("zhijiao.jpeg");background-size:cover;height: 700px;}
  16.                 h1 {font-size: 150%;padding: 50px;text-align: center;font-family: FangSong;color: green;text-decoration: none;}
  17.                 .main{width:1000px;overflow:hidden;margin:20px auto;}
  18.                 .aboutus{width:700px;float:left;}
  19.                 .aboutus img{width:280px;height:200px;float:left;margin-right:20px;}
  20.                 .aboutus p{text-indent:28px;line-height:26px;}
  21.                 .zhijiaoxinxi .title{width:10%;height:120px;line-height:30px;background-color:#fff433;font-size:20px;text-align: center;text-decoration:none;font-family: FangSong;}
  22.                 .zhijiaoxinxi ul{width:300px;}
  23.                 .zhijiaoxinxi li{height:26px;line-height:26px;text-indent:20px;overflow:hidden;}
  24.                 .zhijiaoxinxi li a{color:#000;text-decoration: none;}
  25.                 .zhijiaoxinxi li a:hover{color:#dd3b30;}
  26.                 .zhijiaoxinxi {width:280px;float:right;}
  27.                 .zhijiaoxinxi {display: flex;}
  28.                 .tuji{width:100%;clear:both;padding-top:10px;overflow:hidden;}
  29.                 .tuji .title{height:30px;line-height:30px;border-bottom:10px solid #84C1FF;font-size:20px;color:#AAAAFF;}
  30.                 .tuji .title span{width:100px;height:30px;text-align:center;float:center;font-size: 20px;}
  31.                 .tuji ul{padding-top:10px;}
  32.                 .tuji li{width:240px;margin:5px;float:right;background:#f2f2f2;}
  33.                 .tuji li img{width:240px;height:180px;}

  35.                 </style>
  36.         </head>
  37.         <body>
  38.                 <div class="top">
  39.                                 <ul>
  40.                                 <li><a href="login.html">登陆</a></li>
  41.                                 <li><a href="reg.html">注册</a></li>
  42.                                 <li><a href="baoming.html">报名支教</a></li>
  43.                                 <li><a href="#">支教老师须知</a></li>
  44.                                 <li><a href="ND.HTML">关于我们-ND</a></li>
  45.                                 </ul>               
  46.                 </div>

  48.                  <div id="xiaohai">
  49.             <h1>关爱儿童，关爱未来</h1>
  50.                           </div>
  51.          
  52.                 <div class="main">

  54.         <div class="aboutus">
  55.             <img src="luanke.jpg">
  56.             <p>
  57.                有这样一个德国人，从1997年开始，常年深入到中国广西不通电话、
  58. 不通公路的偏远山村，
  59. 去陪伴当地的乡村留守儿童。
  60. 在当地村民眼中：
  61. 这个不抽烟、不喝酒、不吃肉、
  62. 不要工资，也不谈恋爱，
  63. 整天与乡村孩子在一起的德国人，
  64. 就是个一个“怪人”。
  65.             </p>
  66.             <p>
  67.                他的行为吸引央视记者柴静，
  68. 两次前往深山进行采访。
  69. 第一次采访结束后柴静就觉得：
  70. 面对这个人，让自己土崩瓦解……
  71. 无形中这位德国中年男人，成了柴静的精神导师。他的事迹被媒体广泛报道后，有人说他是圣徒，是当代“白求恩”，也有人说他是异类，是失败者……但他不为所动，我只是在遵从我的内心，做我自己想做的事。这个德国人曾经有个中文名字：卢安克
  72.             </p>

  74.         </div>
  75.         <div class="zhijiaoxinxi">
  76.             <div class="title">招募信息</div>
  77.             <ul>
  78.                 <li><a href="zhijiaoxinxi1.html">艺启梦想西部支教志愿者</a></li>
  79.                 <li><a href="zhijiaoxinxi2.html">本木源助学四川支教志愿者老师申请</a></li>
  80.                 <li><a href="zhijiaoxinxi3.html">荞麦花开四川支教志愿者老师申请</a></li>
  81.                 <li><a href="zhijiaoxinxi4.html">绿之叶公益四川支教老师申请</a></li>
  82.                 <li><a href="zhijiaoxinxi5.html">索玛花四川凉山支教老师申请</a></li>
  83.                 <li><a href="zhijiaoxinxi6.html">小书包公益重庆支教老师申请</a></li>
  84.                 <li><a href="zhijiaoxinxi7.html">为中国而教支教老师申请</a></li>
  85.             </ul>
  86.                 </div>
  87.                  <div class="tuji">
  88.             <div class="title"><span>支教图集</span></div>
  89.             <ul>
  90.                 <li>
  91.                     <img src="zhijiao1.webp">
  92.                 </li>
  93.                 <li>
  94.                     <img src="zhijiao2.jpeg">
  95.                 </li>
  96.                 <li>
  97.                     <img src="zhijiao3.jpeg">
  98.                 </li>
  99.                 <li>
  100.                     <img src="zhijiao4.jpeg">
  101.                 </li>               
  102.             </ul>
  103.         </div>

  105.         </body>
  106. </html>
复制代码

将class="zhijiaoxinxi"的布局渲染改成flex即可
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

天道8
 楼主| 发表于 2022-6-9 11:36:28 | 显示全部楼层
问题如图
问题2.png
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

临时号
发表于 2022-6-9 13:38:22 | 显示全部楼层    本楼为最佳答案   
本帖最后由 临时号 于 2022-6-13 21:20 编辑

  2. <!DOCTYPE html>
  3. <html>
  4.         <head>
  5.                 <meta charset="utf-8">
  6.                 <title>中华支教信息中心</title>
  7.                 <style>
  8.                 *{margin: 0;padding: 0;font-size: 12px;}
  9.                 ul li{list-style: none;}
  10.                 .clear{clear: both;font-size: 1px;width: 1px;height: 0px;visibility: hidden;overflow: hidden;}
  11.                 .top{background: #4CB0A0;width:100%;display: table;}
  12.                 .top ul {float: right;margin-right:0px; }
  13.                 .top ul li {float: left;margin:5px; }
  14.                 .top ul li a{text-decoration:none;display: block;color: ##c2c2c2;line-height: :30px;margin: 10px 0px;width: 75px;text-align: center;}
  15.                 #xiaohai {font-size:200%;height: 350px; background-image: url("zhijiao.jpeg");background-size:cover;height: 700px;}
  16.                 h1 {font-size: 150%;padding: 50px;text-align: center;font-family: FangSong;color: green;text-decoration: none;}
  17.                 .main{width:1000px;overflow:hidden;margin:20px auto;}
  18.                 .aboutus{width:700px;float:left;}
  19.                 .aboutus img{width:280px;height:200px;float:left;margin-right:20px;}
  20.                 .aboutus p{text-indent:28px;line-height:26px;}
  21.                 .zhijiaoxinxi .title{width:10%;height:120px;line-height:30px;background-color:#fff433;font-size:20px;text-align: center;text-decoration:none;font-family: FangSong;}
  22.                 .zhijiaoxinxi ul{width:300px;}
  23.                 .zhijiaoxinxi li{height:26px;line-height:26px;text-indent:20px;overflow:hidden;}
  24.                 .zhijiaoxinxi li a{color:#000;text-decoration: none;}
  25.                 .zhijiaoxinxi li a:hover{color:#dd3b30;}
  26.                 .zhijiaoxinxi {width:280px;float:right;}
  27.                 .zhijiaoxinxi {display: flex;}
  28.                 .tuji{width:100%;clear:both;padding-top:10px;overflow:hidden;}
  29.                 .tuji .title{height:30px;line-height:30px;border-bottom:10px solid #84C1FF;font-size:20px;color:#AAAAFF;}
  30.                 .tuji .title span{width:100px;height:30px;text-align:center;float:center;font-size: 20px;}
  31.                 .tuji ul{padding-top:10px;}
  32.                 .tuji li{width:240px;margin:5px;float:right;background:#f2f2f2;}
  33.                 .tuji li img{width:240px;height:180px;}

  35.                 </style>
  36.         </head>
  37.         <body>
  38.                 <div class="top">
  39.                                 <ul>
  40.                                 <li><a href="login.html">登陆</a></li>
  41.                                 <li><a href="reg.html">注册</a></li>
  42.                                 <li><a href="baoming.html">报名支教</a></li>
  43.                                 <li><a href="#">支教老师须知</a></li>
  44.                                 <li><a href="ND.HTML">关于我们-ND</a></li>
  45.                                 </ul>               
  46.                 </div>

  48.                  <div id="xiaohai">
  49.             <h1>关爱儿童，关爱未来</h1>
  50.                           </div>
  51.          
  52.                 <div class="main">

  54.         <div class="aboutus">
  55.             <img src="luanke.jpg">
  56.             <p>
  57.                有这样一个德国人，从1997年开始，常年深入到中国广西不通电话、
  58. 不通公路的偏远山村，
  59. 去陪伴当地的乡村留守儿童。
  60. 在当地村民眼中：
  61. 这个不抽烟、不喝酒、不吃肉、
  62. 不要工资，也不谈恋爱，
  63. 整天与乡村孩子在一起的德国人，
  64. 就是个一个“怪人”。
  65.             </p>
  66.             <p>
  67.                他的行为吸引央视记者柴静，
  68. 两次前往深山进行采访。
  69. 第一次采访结束后柴静就觉得：
  70. 面对这个人，让自己土崩瓦解……
  71. 无形中这位德国中年男人，成了柴静的精神导师。他的事迹被媒体广泛报道后，有人说他是圣徒，是当代“白求恩”，也有人说他是异类，是失败者……但他不为所动，我只是在遵从我的内心，做我自己想做的事。这个德国人曾经有个中文名字：卢安克
  72.             </p>

  74.         </div>
  75.         <div class="zhijiaoxinxi">
  76.             <div class="title">招募信息</div>
  77.             <ul>
  78.                 <li><a href="zhijiaoxinxi1.html">艺启梦想西部支教志愿者</a></li>
  79.                 <li><a href="zhijiaoxinxi2.html">本木源助学四川支教志愿者老师申请</a></li>
  80.                 <li><a href="zhijiaoxinxi3.html">荞麦花开四川支教志愿者老师申请</a></li>
  81.                 <li><a href="zhijiaoxinxi4.html">绿之叶公益四川支教老师申请</a></li>
  82.                 <li><a href="zhijiaoxinxi5.html">索玛花四川凉山支教老师申请</a></li>
  83.                 <li><a href="zhijiaoxinxi6.html">小书包公益重庆支教老师申请</a></li>
  84.                 <li><a href="zhijiaoxinxi7.html">为中国而教支教老师申请</a></li>
  85.             </ul>
  86.                 </div>
  87.                  <div class="tuji">
  88.             <div class="title"><span>支教图集</span></div>
  89.             <ul>
  90.                 <li>
  91.                     <img src="zhijiao1.webp">
  92.                 </li>
  93.                 <li>
  94.                     <img src="zhijiao2.jpeg">
  95.                 </li>
  96.                 <li>
  97.                     <img src="zhijiao3.jpeg">
  98.                 </li>
  99.                 <li>
  100.                     <img src="zhijiao4.jpeg">
  101.                 </li>               
  102.             </ul>
  103.         </div>

  105.         </body>
  106. </html>
复制代码

将class="zhijiaoxinxi"的布局渲染改成flex即可
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-28 19:00

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表