【下面那2行字不知道为什么垒起来了 _自适应】

下面那2行字不知道为什么垒起来了

我也踩过这个坑( 2 )

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

回答(2)

自适应

详细描述

截图

代码

body {
    margin: 0;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #5fc0cd;
    height: 40px;
    font-size: 15px;
    color: white;
}

.head {
    width: 12px;
    padding-left: 10px;
}

.head1 {
    color: #5fc0cd;
}

.picture {
    display: flex;
    align-items: center;
    background: url(1.png);
    background-size: 100%;
    height: 145px;

}

.picture1 {}

.box1 {
    margin: 0 0 0 20px;
}

.fei {
    margin: 0 0 0 20px;
    width: 70px;
    height: 70px;
}
.zi {
    padding:0 0 10px 0 ;
    font-size: 14px;
    color: white;
}
.box {
    width: 11px;
    height: 11px;
    margin: 0 5px 0 0;
}
.font {
    font-size: 12px;
    color: white;
}
.Icolor{
    font-size:14px ; 
    color: #5fc0cd;
    margin:0 0 0 10px ;
}
.colour1{
    background-color:#ffffff;
}
.wire1{
    border-bottom: 1px solid #e1e5e7 ;
    height: 50px;
    display:flex;
    align-items:center;
}
.wire2{
    margin:0 0 0 15px ;
    font-size: 15px;
}
.wire3{
    border-bottom: 1px solid #e1e5e7 ;
    height: 50px;
    display:flex;
    align-items:center;
    margin: 0 0 0 18px;
}
.little{
    width:12px ;
    margin:0 12px 0 10px ;
}
.colour{
    font-size:14px ;
    color:#e1e5e7;
    margin: 0 0 0 12px;
}
.font1{
    margin:0 0 0 12px ;
    color:#e1e5e7;
    font-size:15px ; 
}
.colour2{
    font-size:14px ;
    color:#e1e5e7;
    margin: 0 12px 0 12px;
}
.font3{
   font-size: 10px;
}

<!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" href="four.css">
</head>
<body>
    <header class="header">
        <img class="head" src="5.png" >
        <div>个人主页</div>
        <div class="head1">></div>
    </header>
    <div class="picture">
    <div class="picture1">
    <img class="fei" src="01.png">
    </div>
    <div class="box1" > 
    <div class="zi">徐士林 55岁</div>
    <div class="font">
    <img class="box" src="2.png" > 
    <a>京城·四方·报纸林</a>
</div>
    </div class="">
    </div>
    <div></div>
    <div class="wire1">
      <a class="Icolor">|</a>  <a class="wire2">专业技能</a>
    </div>
    <div class="wire3">
     <img class="little" src="4 -4.png" >
     <div>住家</div>
     <div class="colour">|</div>
     <img class="little" src="4 -4.png" >
     <div>不含早餐</div>
    </div>
    <div class="wire3">
        <div class="font1">从业年限</div>
       <div class="colour2">|</div>
       <div >0~3年</div>
    </div>
    <div class="wire3">
        <div class="font1">工作时间</div>
        <div class="colour2">|</div>
        <div class="font3">全天</div>
    </div>
    <div class="wire3">
        <div class="font1">服务价格</div>
        <div class="colour2">|</div>
        <div class="font3" style= "color:red">25小时</div>
    </div>
    <div class="wire3">
        <div class="font1">自我介绍</div>
        <div class="colour2">|</div>
        <div class="font3">可以洗衣、做饭、照顾老人。在护工方面有5的年经验，经验丰富。
        </div>
    </div>
</div>
</body>
</html>

编辑于2024-04-17

时间排序

热门排序

[北京|结业弟子]JS-李珅颖
0
是自我介绍那行字吗？你需要给这个字添加强制不换行属性
```
 white-space:nowrap;
```
可以去菜鸟搜一下white-space属性。
查看全部>
编辑于2019-06-22
[萌新|结业弟子]JS-张嘉豪
0

自我介绍那一行么？你可以给自我介绍加一个不换行的属性white-space：nowrap
或者给自我介绍这一块加一个最小宽度max-width：xxpx

查看全部>

编辑于2019-11-05

去第页