【底下的自我介绍那一行，没有办法做到和设计图一样，上下两行，不知道是哪里出了问题】

底下的自我介绍那一行，没有办法做到和设计图一样，上下两行，不知道是哪里出了问题

我也踩过这个坑( 2 )

已统计您的踩坑,无需重复点击

回答(2)

详细描述

截图

代码

<!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">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="task5.css">
</head>

<body>
    <header class="return">
        <a class="arrow"></a>
        <span class="introductio">个人主页</span>
    </header>
    <div class="bg">
        <!-- 背景图片 -->
        <div class="portrait"></div>
        <div>
            <div>
                <span class="name">高素雅</span>
                <span class="age">51岁</span>
            </div>
            <div class="box1">
                <div class="shape"></div>
                <span class="address">北京.通州.果园</span>
            </div>
        </div>
    </div>
    <div class="box3">
        <div class="skill">
            <p>专业技能</p>
        </div>
       <div class="require">
            <div class="box4">
                <div class="pentagram1"></div>
                <span class="require1">住家</span>
            </div>
            <div class="box5">
                <div class="pentagram2"></div>
                <span class="require2">不含餐</span>
            </div>
        </div>
        <div class="menu">
            <span class="submenu">工作年限</span>
            <span class="submenu1">0~3年</span>
        </div>
        <div class="menu">
            <span class="submenu">工作时间</span>
            <span class="submenu1">全天</span>
        </div>
        <div class="menu">
            <span class="submenu">服务价格</span>
            <span class="submenu2">25元/小时</span>
        </div>
        <div class="introduction">
            <span class="submenu">自我介绍</span>
            <div>
                <span class="introduction2">可以洗衣、做饭、照顾老人。在护
                    工方面有5年的经验，经验丰富。</span>
            </div>
        </div>
    </div>
    <footer>
        <button class="leaveword">留言</button>
        <button class="phone">联系方式</button>
    </footer>        
</body>

</html>
html{
    font-size: 62.5%
}
body{
    margin: 0;
    font-size: 1.6rem;
}
header{
    height:4.4rem;
    background-color: #5FC0CD;
    text-align: center;
    position: fixed;
    width: 100%;
    top: 0;
}
/*.return{*/
    /*width: 20px;*/
    /*height: 20px;*/
    /*border-top: 1px solid white;*/
    /*border-right: 1px solid white;*/
    /*transform:rotate(45deg);*/
/*}*/
.arrow{
    position: absolute;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-top: 3px solid white;
    border-left: 3px solid white;
    transform:rotate(-45deg);
    display: inline-block;
    margin-left: 3.5rem;
    margin-top: 1.2rem;
    float: left;
}
.introductio{
    color: white;
    text-align: center;
    line-height: 4rem;
}
.bg{
    background: url(./doctor.png) no-repeat;
    height: 16.3rem;
    background-size: cover;
    display: flex;
    align-items: center;
    margin-top: 4rem;
}
.portrait{
    background: url(./head\ portrait.png) no-repeat;
    height: 8.45rem;
    width: 8.45rem;
    background-size: cover;
    margin-left: 1.5rem;
}
.name{
    color: white;
    margin-left: 2rem;
}
.age{
    color: white;
    margin-left: 1.5rem;
}
.shape{
    background: url(./Shape\ 4.png) no-repeat;
    width: .9rem;
    height: 1.15rem; 
    align-items: center;
    background-size: cover;
    display:inline-block;
    vertical-align: middle;
    margin-left: 2.2rem;
}
.address{
    color: white;
    font-size: .24rem;
}
.box3{
    height: 41.65rem;
}
.skill{
    height: 5rem;
    border: 1px solid  #E1E5E7;
}
p{
    border-left:4px solid #5FC0CD;
    display: inline-block;
    line-height: 2rem;
    margin-left: 2rem;
    padding-left: 1rem;
}
.require{
    border-bottom: .5px solid #E1E5E7;
    margin-left: 1.65rem;
    line-height: 5rem;
    height: 5rem;
    font-size: 1.8rem;
}
.box4{
    display: inline-block;
    padding-left: 1rem;
    border-right:1px solid #E1E5E7;
    line-height: 2rem;
    padding-right: 1rem;
}
.pentagram1{
    background: url(./pentagram1.png) no-repeat;
    display: inline-block;
    width: 1.1rem;
    height: 1.2rem;
    background-size: contain;
    margin-left: 3rem;
}
.box5{
    display: inline-block;
}
.pentagram2{
    display: inline-block;
    background: url(./pentagram2.png) no-repeat;
    width: 1.1rem;
    height: 1.2rem;
    background-size: contain;
}
.menu{
    border-bottom:1px solid #EFF0F4;
    height: 5rem;
    line-height: 5rem;
    margin-left: 1.65rem;
}
.submenu{
    margin-left: 3.4rem;
    border-right: 1px solid #E1E5E7;
    padding-right: 1rem;
}
.submenu1{
    margin-left: 1.35rem;
}
.submenu2{
    margin-left: 1.35rem;
    color:  #E26163;
}
.introduction{
    border-bottom:1px solid #EFF0F4;
    height: 5rem;
    display: flex;
    margin-left: 1.65rem;
    align-items: center;
}
.introduction2{
    font-size: 1.4rem;
    width: 40rem;
    padding-left: 2rem;
}
footer{
    display: flex;
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: white;
}
.leaveword{
    width: 40%;
    height: 4.4rem;
    background-color: white;
    border: 1px solid #5FC0CD;
    color: #5FC0CD;
    font-size: 100%;
    border-radius: 5px;
    margin: auto;
}
.phone{
    width: 40%;
    height: 4.4rem;
    background-color: #5FC0CD;
    border: 1px solid #5FC0CD;
    color: white;
    font-size: 100%;
    border-radius: 5px;
    margin: auto;
}

编辑于2025-03-31

时间排序

热门排序

[北京|结业弟子]JS-朱春雨
0

可以给右边的内容区设置宽度，用100%宽度减去左侧的宽度，让内容在右侧的宽度内展开

width: calc( 100% - 左侧宽度); 设置成怪异盒模型不需要此操作 box-sizing:border-box;

自我介绍用绝对定位，设置成内联块

查看全部>

编辑于2019-11-11
[深圳|荣耀师兄]JS-张志安
0

该任务主要展现为移动端，PC端打开后宽度拉长变一行是正常的，如果想宽度拉长还是显示两行的话可以百度查查一些硬手段，如：在换行的地方添加换行符、给文字的盒子设置绝对宽度等等。

查看全部>

编辑于2019-11-16

去第页