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

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

这是目标格式：

以及html代码

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

格式2.png

希望有大佬帮忙

最佳答案

月排行榜 / 总排行榜

守梦

2019-10-22 22:25:35

流览图(谷歌浏览器):
批注 2019-10-23 004205.png

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:25:35

流览图(谷歌浏览器):
批注 2019-10-23 004205.png

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:

谢谢老铁了，昨晚群里是你吧。

账号		自动登录	找回密码
密码			立即注册