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

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 怎么让h2元素和p元素对应同行
返回列表 发新帖
查看: 3581|回复: 5

[已解决]怎么让h2元素和p元素对应同行

[复制链接]
xiaolclocktower
发表于 2019-10-22 22:25:34 | 显示全部楼层 |阅读模式
20鱼币
这是目标格式：
  
格式.png
以及html代码
html.png
怎么编写一个css文件得到上面的效果？
做了2天总是做不出h2元素和p元素对应同行
下面是我现在的成果和代码：
  
格式2.png
css.png
希望有大佬帮忙
最佳答案
月排行榜 / 总排行榜
守梦
2019-10-22 22:25:35
流览图(谷歌浏览器):
批注 2019-10-23 004205.png HTML:
  1. <body>
  2.     <h1>简历</h1>
  3.     <h2 style="float:left;">基本信息</h2>
  4.         <section>
  5.                 <p><strong>姓名</strong>  张三</p>
  6.                 <p><strong>性别</strong>  男</p>
  7.                 <p><strong>应聘职位</strong> web前端工程师</p>
  8.    </section>        
  9.    <hr/>
  10.    <h2>联系方式</h2>
  11.    <section>
  12.                 <p><strong>手机</strong>  12312341234</p>
  13.                 <p><strong>Email</strong>  <a href="https://www.bilibili.com/" target="_block">joinefe@baidu.com</a></p>
  14.                 <p><strong>个人主页</strong> <a href="https://www.bilibili.com/"target="_block">Github</a></p>
  15.     </section>
  16.         <hr/>
  17.     <h2>能力描述</h2>
  18.         <section class="ss2">
  19.                 <p><strong>技术能力</strong>熟练掌握HTML,CSS,JavaScript </p>
  20.                 <p class="sp"><strong>综合能力</strong>良好沟通, 主动积极, 努力勤奋</p>
  21.         </section>
  22.         <hr/>
  23.     <h2>教育背景</h2>
  24.         <section class="ss2">
  25.                 <p><strong>本科</strong>百度前端技术学院小薇学院</p>
  26.                 <p class="sp"><strong>研究生</strong>百度前端技术学院大斌学院</p>
  27.         </section>
  28.         <hr/>
  29.     <h2>项目经历</h2>
  30.         <section class="ss2">
  31.                 <p><strong>小度小度</strong>作为前端工程师角色参与了ABC组件的开发</p>
  32.                 <p class="sp"><strong>SAN Doc</strong>作为文档工程师参与了SAN Doc编写</p>
  33.         </section>
  34. </body>
复制代码

CSS:
  1. body{
  2.     margin: 0;
  3.     padding: 0;/*消除边缘*/
  4.    
  5. }
  6. section{
  7.     display: flex;
  8.     flex-direction: row;/*让基本信息与联系方式内的文本能在同一行向右对齐，是在元素p的父一级设制*/
  9.         padding-left: 30px;
  10.     height: 163px; /*固定高度*/
  11. }
  12. section>p{
  13.     margin-left: 0;
  14.     margin-right: 100px;/*设置同行元素间隔*/
  15. }
  16. .sp{
  17.         margin-top:-15px;/*强制设置段落间距*/
  18. }
  19. .ss2{
  20.         flex-direction:column;  /*设置为上下布局*/
  21. }

  23. h1{
  24.     color: white;
  25.     background-color: gray;
  26.     padding: 30px;
  27.     margin: 0;
  28. }
  29. h2{
  30.         float:left;        /*左浮动*/
  31.     background-color: rgb(224, 217, 217);
  32.     margin: 0;
  33.     padding: 66px 30px;/*一个h2元素为24px大，4个元素就是96px宽，高也要增加72px，对半就是36px*/
  34.     display: inline-block;
  35. }
复制代码

最佳答案

守梦

查看完整内容

流览图(谷歌浏览器): HTML: CSS:
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

守梦
发表于 2019-10-22 22:25:35 | 显示全部楼层    本楼为最佳答案   
流览图(谷歌浏览器):
批注 2019-10-23 004205.png HTML:
  1. <body>
  2.     <h1>简历</h1>
  3.     <h2 style="float:left;">基本信息</h2>
  4.         <section>
  5.                 <p><strong>姓名</strong>  张三</p>
  6.                 <p><strong>性别</strong>  男</p>
  7.                 <p><strong>应聘职位</strong> web前端工程师</p>
  8.    </section>        
  9.    <hr/>
  10.    <h2>联系方式</h2>
  11.    <section>
  12.                 <p><strong>手机</strong>  12312341234</p>
  13.                 <p><strong>Email</strong>  <a href="https://www.bilibili.com/" target="_block">joinefe@baidu.com</a></p>
  14.                 <p><strong>个人主页</strong> <a href="https://www.bilibili.com/"target="_block">Github</a></p>
  15.     </section>
  16.         <hr/>
  17.     <h2>能力描述</h2>
  18.         <section class="ss2">
  19.                 <p><strong>技术能力</strong>熟练掌握HTML,CSS,JavaScript </p>
  20.                 <p class="sp"><strong>综合能力</strong>良好沟通, 主动积极, 努力勤奋</p>
  21.         </section>
  22.         <hr/>
  23.     <h2>教育背景</h2>
  24.         <section class="ss2">
  25.                 <p><strong>本科</strong>百度前端技术学院小薇学院</p>
  26.                 <p class="sp"><strong>研究生</strong>百度前端技术学院大斌学院</p>
  27.         </section>
  28.         <hr/>
  29.     <h2>项目经历</h2>
  30.         <section class="ss2">
  31.                 <p><strong>小度小度</strong>作为前端工程师角色参与了ABC组件的开发</p>
  32.                 <p class="sp"><strong>SAN Doc</strong>作为文档工程师参与了SAN Doc编写</p>
  33.         </section>
  34. </body>
复制代码

CSS:
  1. body{
  2.     margin: 0;
  3.     padding: 0;/*消除边缘*/
  4.    
  5. }
  6. section{
  7.     display: flex;
  8.     flex-direction: row;/*让基本信息与联系方式内的文本能在同一行向右对齐，是在元素p的父一级设制*/
  9.         padding-left: 30px;
  10.     height: 163px; /*固定高度*/
  11. }
  12. section>p{
  13.     margin-left: 0;
  14.     margin-right: 100px;/*设置同行元素间隔*/
  15. }
  16. .sp{
  17.         margin-top:-15px;/*强制设置段落间距*/
  18. }
  19. .ss2{
  20.         flex-direction:column;  /*设置为上下布局*/
  21. }

  23. h1{
  24.     color: white;
  25.     background-color: gray;
  26.     padding: 30px;
  27.     margin: 0;
  28. }
  29. h2{
  30.         float:left;        /*左浮动*/
  31.     background-color: rgb(224, 217, 217);
  32.     margin: 0;
  33.     padding: 66px 30px;/*一个h2元素为24px大，4个元素就是96px宽，高也要增加72px，对半就是36px*/
  34.     display: inline-block;
  35. }
复制代码

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

守梦
发表于 2019-10-22 22:31:22 | 显示全部楼层
把源码发出来a..
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

xiaolclocktower
 楼主| 发表于 2019-10-22 22:40:04 | 显示全部楼层
守梦 发表于 2019-10-22 22:31
把源码发出来a..

ok
html的是：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="xiaoli">
    <meta name="keywords" content="简历">  
    <meta name="description" content="学历，工作经历，个人基本信息">  
    <title>xiaoli简历</title>
    <link rel="stylesheet" href="style_3.css" type="text/css">
</head>
<body>
    <h1>简历</h1>
    <h2>基本信息</h2>
    <section >
    <p ><strong>姓名</strong>  张三</p>
    <p><strong>性别</strong>  男</p>
    <p><strong>应聘职位</strong> web前端工程师</p>
   </section>
   <h2>联系方式</h2>
   <section>
    <p ><strong>手机</strong>  12312341234</p>
    <p><strong>Email</strong>  <a href="https://www.bilibili.com/" target="_block">joinefe@baidu.com</a></p>
    <p><strong>个人主页</strong> <a href="https://www.bilibili.com/"target="_block">Github</a></p>
    </section>
    <h2>能力描述</h2>
    <p><strong>技术能力</strong>熟练掌握HTML,CSS,JavaScript </p>
    <p><strong>综合能力</strong>良好沟通, 主动积极, 努力勤奋</p>
    <h2>教育背景</h2>
    <p><strong>本科</strong>百度前端技术学院小薇学院</p>
    <p><strong>研究生</strong>百度前端技术学院大斌学院</p>
    <h2>项目经历</h2>
    <p><strong>小度小度</strong>作为前端工程师角色参与了ABC组件的开发</p>
    <p><strong>SAN Doc</strong>作为文档工程师参与了SAN Doc编写</p>
</body>
</html>

css部分是：body{
    margin: 0;
    padding: 0;/*消除边缘*/
   
}
section{
    display: flex;
    flex-direction: row;/*让基本信息与联系方式内的文本能在同一行向右对齐，是在元素p的父一级设制*/
}
section>p{
    margin-left: 0;
    margin-right: 100px;/*设置同行元素间隔*/
}
h1{
    color: white;
    background-color: gray;
    padding: 30px;
    margin: 0;
}
h2{
    background-color: rgb(224, 217, 217);
    margin: 0;
    padding: 66px 30px;/*一个h2元素为24px大，4个元素就是96px宽，高也要增加72px，对半就是36px*/
    display: inline-block;
}
最好能直用css布局，少修改html代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

xiaolclocktower
 楼主| 发表于 2019-10-22 23:05:17 | 显示全部楼层
css标注错了，是让元素向左对齐，不是向右
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

xiaolclocktower
 楼主| 发表于 2019-10-23 20:49:04 | 显示全部楼层
守梦 发表于 2019-10-22 22:25
流览图(谷歌浏览器):
HTML:

谢谢老铁了，昨晚群里是你吧。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-4-18 13:21

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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