xiaolclocktower 发表于 2019-10-22 22:25:34

怎么让h2元素和p元素对应同行

这是目标格式：


以及html代码

怎么编写一个css文件得到上面的效果？
做了2天总是做不出h2元素和p元素对应同行
下面是我现在的成果和代码：



希望有大佬帮忙

守梦 发表于 2019-10-22 22:25:35

流览图(谷歌浏览器):
HTML:
<body>
    <h1>简历</h1>
    <h2 style="float:left;">基本信息</h2>
      <section>
                <p><strong>姓名</strong>张三</p>
                <p><strong>性别</strong>男</p>
                <p><strong>应聘职位</strong> web前端工程师</p>
   </section>      
   <hr/>
   <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>
      <hr/>
    <h2>能力描述</h2>
      <section class="ss2">
                <p><strong>技术能力</strong>熟练掌握HTML,CSS,JavaScript </p>
                <p class="sp"><strong>综合能力</strong>良好沟通, 主动积极, 努力勤奋</p>
      </section>
      <hr/>
    <h2>教育背景</h2>
      <section class="ss2">
                <p><strong>本科</strong>百度前端技术学院小薇学院</p>
                <p class="sp"><strong>研究生</strong>百度前端技术学院大斌学院</p>
      </section>
      <hr/>
    <h2>项目经历</h2>
      <section class="ss2">
                <p><strong>小度小度</strong>作为前端工程师角色参与了ABC组件的开发</p>
                <p class="sp"><strong>SAN Doc</strong>作为文档工程师参与了SAN Doc编写</p>
      </section>
</body>
CSS:
body{
    margin: 0;
    padding: 0;/*消除边缘*/
   
}
section{
    display: flex;
    flex-direction: row;/*让基本信息与联系方式内的文本能在同一行向右对齐，是在元素p的父一级设制*/
      padding-left: 30px;
    height: 163px; /*固定高度*/
}
section>p{
    margin-left: 0;
    margin-right: 100px;/*设置同行元素间隔*/
}
.sp{
      margin-top:-15px;/*强制设置段落间距*/
}
.ss2{
      flex-direction:column;/*设置为上下布局*/
}

h1{
    color: white;
    background-color: gray;
    padding: 30px;
    margin: 0;
}
h2{
      float:left;      /*左浮动*/
    background-color: rgb(224, 217, 217);
    margin: 0;
    padding: 66px 30px;/*一个h2元素为24px大，4个元素就是96px宽，高也要增加72px，对半就是36px*/
    display: inline-block;
}

守梦 发表于 2019-10-22 22:31:22

把源码发出来a..

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代码

xiaolclocktower 发表于 2019-10-22 23:05:17

css标注错了，是让元素向左对齐，不是向右

xiaolclocktower 发表于 2019-10-23 20:49:04

守梦 发表于 2019-10-22 22:25
流览图(谷歌浏览器):
HTML:



谢谢老铁了，昨晚群里是你吧。
页: [1]
查看完整版本: 怎么让h2元素和p元素对应同行